Translate a Vue app into German: vue-i18n JSON files

What German does to a Vue interface

German lengthens strings and builds compound words that cannot wrap at a space. “Save” becomes Speichern, but “Account settings” becomes Kontoeinstellungen: one eighteen-letter block inside a button or tab. Expect German text to run 20 to 35 % longer than English, and much more on two- or three-word labels.

• Every noun is capitalised: a CSS text-transform: lowercase or capitalize on your menus produces incorrect German. Drop it for the de locale.
• Formal or informal: Sie is the norm in professional contexts, while many consumer apps use du. Seeing Melden Sie sich an on one screen and Speichere deine Änderungen on the next looks careless.
• Punctuation: German quotation marks are „…“, and decimal commas apply to numbers.
• Word order: past participles move to the end, so {count} files deleted becomes {count} Dateien gelöscht. A sentence stitched together in code with $t('a') + name + $t('b') cannot follow that order; a single string with a placeholder can.

vue-i18n plurals in German: two categories and gendered words

German has only two CLDR plural categories, one and other, and zero takes the plural: 0 Dateien, as in English “0 files”. If your source is French, note that French puts 0 with the singular, so a French-specific rule should not be copied across.

• With two forms, 1 Datei | {count} Dateien, vue-i18n’s default rule sends 0 to the second form, which suits German.
• If your project defines custom pluralRules for the source locale, do not reuse them for de.
• With three forms (zero | one | many), the number of segments stays the same: no files | one file | {count} files becomes keine Dateien | eine Datei | {count} Dateien. Manuce keeps the pipe-separated forms; it does not merge or add any.

A trap specific to German is grammatical gender, which affects articles and adjectives. A generic key such as New {item} cannot agree, since German says Neue Datei but Neuer Ordner. Split such keys before translation.

What Manuce returns, and what it does not do

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

• indentation, key order, quotes, comments, line endings, encoding and BOM preserved; only the values change;
• {name} placeholders and pipe-separated plural forms preserved;
• each translated value checked against the source (placeholders, tags): if {count} is missing from the German and the mismatch persists, the source value is kept and the report says so;
• left untranslated: keys, empty values, URLs, email addresses, numbers, colours, date formats, identifiers and anything marked as non-translatable.

The report shows which strings were translated and which were left as they were, and why. Pricing is based on the words in the values; keys and tags are not counted.

Manuce does not touch your code: not text hard-coded in .vue templates, not your numberFormats or datetimeFormats configuration, not the width of your components. Nor does it produce sworn or certified translations: if the app shows terms and conditions, an Impressum or a Datenschutzerklärung for German users, have them reviewed by a lawyer.

Preparing the file and checking German in the running app

Before uploading:

• start from one complete source file, such as en.json; if your messages live in <i18n> blocks or YAML, gather them into JSON first;
• replace concatenations with strings that carry placeholders;
• in vue-i18n 9 and later, @ introduces linked messages, so an address inside a value is written contact{'@'}example.de;
• mark product names and terms you want kept as non-translatable.

After delivery:

• set lang="de" on the html element when the locale switches; without it, hyphens: auto will not break Kontoeinstellungen cleanly;
• go through buttons, tabs, menus and toasts at mobile width;
• make sure amounts and dates go through $n and $d with de-DE: 1.234,56 €, 31.12.2025;
• read the report and deal with any strings left in the source language.

In practice

1. Gather your Vue app’s messages into one complete source JSON file.
2. Upload it: the quote is based on the exact word count of the values, and the free extract shows the German you will get, register included.
3. Pay, then download de.json and the report from your account.
4. Add de.json to the messages in createI18n, set lang="de" on the page and test each screen at mobile width.