Adding UI Translations

The Vendure Admin UI is fully localizable, allowing you to:

• create custom translations for your UI extensions
• override existing translations
• add complete translations for whole new languages

Translation format

The Admin UI uses the Messageformat specification to convert i18n tokens to localized strings in the browser. Each language should have a corresponding JSON file containing the translations for that language.

Here is an excerpt from the en.json file that ships with the Admin UI:

{  "admin": {    "create-new-administrator": "Create new administrator"  },  "asset": {    "add-asset": "Add asset",    "add-asset-with-count": "Add {count, plural, 0 {assets} one {1 asset} other {{count} assets}}",    "assets-selected-count": "{ count } assets selected",    "dimensions": "Dimensions"  }}

The translation tokens are grouped into a single-level deep nested structure. In the Angular code, these are referenced like this:

<label>{{ 'asset.assets-selected-count' | translate:{ count } }}</label>

That is, the { ... } represent variables that are passed from the application code and interpolated into the final localized string.

Adding a new language

The Admin UI ships with built-in support for many languages, but allows you to add support for any other language without the need to modify the package internals.

1. Create your translation file

   Start by copying the contents of the English language file into a new file, <languageCode>.json, where languageCode is the 2-character ISO 639-1 code for the language. Replace the strings with the translation for the new language.

2. Install @vendure/ui-devkit

   If not already installed, install the @vendure/ui-devkit package, which allows you to create custom builds of the Admin UI.