Translate a Vue app into English: vue-i18n locale files

What changes when a Vue interface moves to English

English is usually shorter than Romance languages such as French (around 10 to 15 % shorter), so buttons sized for the source rarely overflow: « Enregistrer les modifications » becomes « Save changes ». The real decisions lie elsewhere.

• British or American. Settle this before ordering: colour/color, licence/license, cancelled/canceled, basket/cart. It should match the locale you register in vue-i18n, en-GB or en-US.
• Punctuation. Source conventions do not carry over: the French space before a colon goes (Total : becomes Total:), and « » or „ “ quotation marks become " " or ‘ ’.
• Formality and gender. English has a single you, so separate key sets for informal and formal address (du/Sie, tu/vous) will end up with identical values. Gendered forms such as « Connecté(e) » simply become « Signed in ».
• Capitalisation. US products often use Title Case on buttons (« Add To Cart »), UK products tend to prefer sentence case (« Add to basket »). State your house style.
• Dates. An input hint like JJ/MM/AAAA or TT.MM.JJJJ must become DD/MM/YYYY for the UK or MM/DD/YYYY for the US. Date formats are not translated, so check these values in the report.

vue-i18n plurals and the English one / other rule

vue-i18n stores plural forms in a single value, separated by a pipe. Manuce keeps that structure: same number of segments, same order, only the wording changes.

A three-form example (zero, one, many):

• Source: Panier vide | {n} article | {n} articles
• Returned: Your basket is empty | {n} item | {n} items

English has only two CLDR categories, one and other, and 0 takes the plural (« 0 items »). With two segments, vue-i18n’s default rule picks the first for 1 and the second for everything else, including 0, which suits English.

The trap comes from the source language. If your source is Russian, Polish or Czech, its values may hold three or four segments driven by a custom pluralRules function. Since the segment count is preserved, the English values will carry the same number of segments: either extend that custom rule to en or reduce those values to two forms yourself. Whatever the source, test each plural string with 0, 1 and 2.

What Manuce returns, and what it does not do

You get back the same JSON file, ready to drop into src/locales or wherever your project keeps it:

• indentation, key order, quotes, line endings, encoding and BOM preserved; only the values change;
• named placeholders such as {name} and pipe-separated plural forms preserved;
• each translated value is checked against the source (variables, tags); if a mismatch persists, the source value is kept and the report says so;
• left untranslated: keys such as checkout.button.pay, empty values, URLs, email addresses, numbers, colours such as #1E88E5, date formats, identifiers, and anything you have marked as non-translatable.

The report lists the strings translated and those left as they were, with the reason. Pricing is based on the words in the values, keys and tags excluded; English is charged at the base rate (×1 coefficient).

What Manuce does not do: it does not read your .vue components. Text hard-coded in templates or held in <i18n> custom blocks is not processed; extract it into your JSON files first. Nor does Manuce touch your configuration (createI18n, fallback locale, date formats).

Preparing the file and checking it afterwards

Before you upload:

• Send the complete source file, not a half-filled en.json.
• Mark product, module or plan names that must stay in the source language as non-translatable.
• Avoid sentences split across keys (You have + {n} + messages): English word order differs from German or French. One value with a placeholder, Sie haben {n} Nachrichten, translates cleanly.
• Watch the special characters of the vue-i18n message syntax: @, |, {, }. An address like support@example.com written plainly in a value can be read as a linked message; escape it in the source and the translation will keep the escape.

When the file comes back:

• read the report, especially values left in the source language;
• run the app in the English locale and watch the console for missing-key warnings;
• check linked messages such as @:common.save and values containing HTML rendered with v-html;
• test plurals with 0, 1 and 2.

In practice

1. Gather your Vue app's source locale file (for example de.json or fr.json) and decide on British or American English.
2. Upload it to Manuce: the quote appears at once, and a free extract shows the level you chose.
3. Download en.json and the report of strings translated or left unchanged.
4. Put the file in your project, register en-GB or en-US and test the interface, plurals included.