Translate a Vue app into Japanese

What Japanese changes in a Vue interface

Japanese mixes three scripts (kanji, hiragana, katakana) and puts no spaces between words. In a Vue app, that has direct consequences for your strings.

• Word order shifts. Welcome, {name} becomes {name}さん、ようこそ: the variable moves to the front and takes the honorific さん. If your code glues fragments together, such as $t('hello') + ' ' + user.name, the Japanese cannot come out right; you need a single string with interpolation.
• Punctuation is full-width. The comma 、 and full stop 。 replace , and . ; colons and question marks follow suit (：？). A Latin full stop at the end of a Japanese message is immediately noticeable.
• Register matters. In a professional product, messages use the polite です/ます form: 保存しました for “Saved”, パスワードが正しくありません for “Incorrect password”. Buttons stay short, often a bare noun: 保存, キャンセル.

A Japanese label often has fewer characters than its English or French equivalent, but each character is roughly as wide as two Latin letters, so a button or tab is not necessarily narrower.

vue-i18n plurals and interpolation in Japanese

Japanese has a single CLDR plural category, other: 1件 and 5件 are written the same way, only the number changes. vue-i18n messages with pipe-separated forms still keep their structure. No results | One result | {count} results might become 結果はありません | {count}件の結果 | {count}件の結果: the number of segments is preserved, vue-i18n's plural selection keeps working without code changes, and the zero form can stay distinct, which reads naturally in Japanese.

• Counters. Japanese attaches a classifier to numbers: 件 for results or messages, 人 for people, 点 for items. {count} attendees becomes {count}人, with no space.
• Named interpolations ({name}, {count}) stay identical, braces included; only their position in the sentence changes.
• Case modifiers such as @.capitalize or @.upper have no effect on kanji or kana, so do not rely on them to format the Japanese version.

What Manuce delivers, and what it does not do

You upload your vue-i18n JSON file, for instance en.json, and get back the same file in Japanese, ready to save as ja.json in your project. Indentation, key order, quotes, any comments, line endings, encoding and BOM are preserved: only the values change, so the diff stays readable in version control.

• Every translated value is checked against the source: if {count} or a tag goes missing in the Japanese and the mismatch persists, the source value is kept and the report says so.
• Not translated: keys (cart.empty stays cart.empty), empty values, URLs, email addresses, numbers, colours, date formats, identifiers and anything you have marked as non-translatable.
• The report lists translated strings and those left as they were, with the reason.

Manuce works on the locale file, not on your code: it does not edit your .vue components or vue-i18n configuration, pick a Japanese font or check on-screen rendering. Pricing is based on the words in the values, keys and tags excluded, with Japanese carrying a ×1.6 coefficient. For a customer-facing interface, the Professional or Premium level suits the polite register better than Essential, which is meant for internal use.

Preparing your locale files

• Get every string into the JSON. Text hard-coded in templates or kept in component <i18n> blocks is not in the file; move it into the source-language JSON first.
• Remove concatenation. Replace $t('total') + ': ' + price with one value, Total: {price}. The Japanese can then place {price} where it belongs and use the full-width colon ：.
• Name variables clearly. {n} does not say whether it counts people (人) or items (点); {memberCount} removes the ambiguity for translation and for your own review.
• Mark what must not be translated. Brand names are often rendered in katakana in Japanese. Decide whether your product name should stay in Latin letters, and mark it accordingly.
• Check special characters. Literal @, {, } and | must be escaped according to your vue-i18n version's syntax, or they will be read as linked messages or plural separators.

Checking the app in Japanese

• Language attribute. Set lang="ja" on the <html> element when the locale switches. Without it, browsers may draw kanji with Chinese glyph shapes.
• Fonts. Put a Japanese font (Noto Sans JP, Hiragino Sans, Yu Gothic, Meiryo) in your font-family before the generic family, to avoid a patchwork of fallback fonts.
• Line breaks. With no spaces, browsers can break between almost any characters. Make sure no line starts with 。 or 、; the CSS property line-break: strict applies stricter breaking rules.
• Dates, numbers, currency. Date formats are not translated: configure datetimeFormats and numberFormats for ja-JP to get 2025年3月14日 and yen without decimals (¥1,200).
• Plurals. Test every counted message with 0, 1 and 2 to see which segment is displayed.

In practice

1. Collect every string in the source-language vue-i18n JSON file and remove concatenated fragments.
2. Upload the file: the quote appears straight away and you can request a free one-paragraph sample in Japanese.
3. Download the translated file and the report, then save it as ja.json in your locales folder.
4. Set lang="ja", a Japanese font and date formats, then test your screens and plurals with 0, 1 and 2.