Translate a Vue app into Simplified Chinese

What Chinese changes in your vue-i18n messages

Simplified Chinese reorders the sentence, and your placeholders move with it. "{count} files selected" becomes "已选择 {count} 个文件": the number sits in the middle, after the verb and before a measure word (个, 条, 项…). This is why sentences split across several keys and glued together in a template translate badly; a single string with its placeholders gives natural Chinese.

Chinese has a single CLDR plural category, other: nouns do not change with quantity. Vue-i18n, however, picks a form by its position in the |-separated string. Manuce keeps the same number of forms as the source, so in Chinese they will often be nearly identical:

• source: "no items | one item | {count} items"
• Chinese: "没有项目 | {count} 个项目 | {count} 个项目"

Your existing $t('cart.items', n) calls keep working unchanged. On register, Chinese interfaces usually address the user with the polite 您 rather than 你; if your product deliberately uses a casual tone, check the free excerpt before ordering.

Punctuation, fonts and layout in a Vue front end

Chinese uses full-width punctuation: ，。：？！. A label such as "Email:" becomes "邮箱：". The trap is in components that add punctuation themselves, such as {{ $t('form.email') }}: in a template: you end up with a half-width colon after Chinese characters. Keep punctuation inside the translated value, not in the markup.

Fonts need a deliberate check:

• a Latin web font has no hanzi, so the browser falls back to whatever it finds. Add Chinese system fonts to your font-family, for example "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
• a full Chinese font file runs to several megabytes, so system fonts are usually a better choice than a downloaded one;
• text-transform: uppercase, italics and wide letter-spacing are meaningless or harmful to legibility in Chinese.

Chinese text is two to three times shorter in characters, but each character is wider, so the space taken barely changes. Character-count truncation (label.slice(0, 20)), however, produces a much longer string on screen. And with no spaces between words, lines can break anywhere: check buttons and narrow columns.

What Manuce returns, and what it does not do

You get the same JSON file back: indentation, key order, quotes, line endings, encoding and BOM preserved; only values change. Keys ("checkout.confirm"), empty values, URLs, email addresses, numbers, colours, date formats, identifiers and anything you mark as non-translatable are left as they are.

Each translated value is checked against the source for matching {name} placeholders and tags. If a translation drops a placeholder and the mismatch persists, the source value is kept and the report says so. You may have a few strings to finish by hand, but no missing {count} breaking the display.

What Manuce does not do:

• it handles vue-i18n JSON files only; text hard-coded in .vue components is not extracted;
• it does not change your CSS, fonts or vue-i18n configuration (locale, fallbackLocale);
• it does not test rendering in your app;
• it does not provide certified (sworn) translation, should your legal pages require it.

Traditional Chinese (Taiwan, Hong Kong) is a separate language at Manuce; order it separately for a zh-TW.json.

Preparing the project before upload

A little preparation avoids most fixes later:

• Start from your most complete locale: if en.json has keys missing from other files, send that one.
• Merge fragmented sentences: replace "You have" + {count} + "messages" with one key, "You have {count} messages", which Chinese can reorder.
• Move hard-coded text out of components into the JSON first.
• Mark non-translatable terms: product name, brand names, technical terms your Chinese users know in English.
• Pick the locale code: zh-CN or zh-Hans rather than bare zh, leaving room for a Traditional version.

Pricing is based on the words in the values, excluding keys and tags, with a ×1.6 coefficient for Chinese. The free excerpt shows one translated paragraph before you pay.

Checking after you put the file back

With zh-CN.json in place, switch the app to Chinese and check:

• the strings the report lists as left in the source language;
• dates and numbers: Manuce leaves formats alone, so use vue-i18n's $d and $n with the zh-CN locale to get, for example, 2024年3月5日;
• the font actually rendered on Windows, macOS and Android;
• colons and brackets added by your code, which should be full-width;
• buttons, tabs and menus where text may wrap or clip.

If a Chinese speaker can review the screens, ask them to focus on measure words and very short labels, which are the most ambiguous out of context.

In practice

1. Export the vue-i18n JSON file of your most complete locale.
2. Upload it to Manuce, choose Simplified Chinese and review the quote and free excerpt.
3. Download the translated file and the report of strings left unchanged.
4. Save it as zh-CN.json, register the locale and add Chinese fonts to your CSS.
5. Walk through the app in Chinese and fix punctuation, truncation and flagged strings.