How to Add a New Language to the Central Server or Security Server UI?

This guide provides a step-by-step approach for adding a new language to central-server, security-server, and shared-ui components. It covers setting up translation files, configuring available languages, and managing shared language messages.

Step 1: Add Translation Files (Using ISO 639-1 Language Codes)

1. File Naming

   1. Use the ISO 639-1 two-letter code (e.g., fr.json for French).

2. File Locations

   1. Place app-specific messages in:

      1. src/central-server/admin-service/ui/src/locales/fr.json for central-server

      2. src/security-server/admin-service/ui/src/locales/fr.json for security-server

      3. src/shared-ui/src/locales/fr.json for shared messages in shared-ui

Step 2: Configure Available Languages and Shared Language Messages

Update the following files:

• src/security-server/admin-service/ui/src/plugins/i18n.ts

• src/central-server/admin-service/ui/src/plugins/i18n.ts

1. Add available languages

Language selection menu will display available languages in same order as listed in availableLanguages

Updating localizations from third-party libraries

Some translations comes from external libraries:

• @vee-validate/i18nhas default error messages for form field validation

• Vuetify has default messages for UI components.

Detailed list of supported languages can be found here: Vuetify list and @vee-validate/i18n list

It is possible to add missing translations for not supported languages or change existing ones by updating locale files under:

• src/shared-ui/src/locales

• src/security-server/admin-service/ui/src/locales

• src/central-server/admin-service/ui/src/locales

Few examples:

• To change validation message for urlvalidation rule (source link) which has key: messages.url update one of X-Road locale JSON file by updating/adding this to it:

  { "validation": { messages: { "url": "Badly formated URL" } } }

• Similar procedure can be used to update Vuetify’s built-in translations, for example to change text in empty table (API link) which has key: $vuetify.noDataText

  { "$vuetify": { "noDataText": "No data here" } }

Summary of changes

1. Add the new language translation files to the specified directories.

2. Configure available languages in the central-server and/or security-server i18n files.

Following these steps will successfully integrate the new language across components.

 Related articles