i18n
Internationalisation (i18n) provides a way for you to customise your shop to accomodate users from different countries.
Locales
The i18n configuration affects language and currency. It's important that the app's configuration matches the settings of the system you connect to. Otherwise, you'll receive incorrect data or data in the wrong language.
- The locale settings have to match the PlentyONE system settings.
- The
fallbackLocale
has to match the system default language. - The
defaultLocale
has to match the system default language.
To update any part of the configuration, modify i18n.config.ts
.
INFO
By default, the app ships with English as the default locale and German as a second locale.
Adding a new locale
Suppose you want to add a new locale, like Spanish. After adding Spanish to the PlentyONE system settings, you have to add it to the available numberFormats
and locales
. In locales
, you specify the name of the translation file.
i18n.config.ts
export default {
fallbackLocale: 'en',
detectBrowserLanguage: false,
numberFormats: {
en: {
currency: {
style: 'currency',
currency: 'GBP',
currencyDisplay: 'symbol',
},
},
de: {
currency: {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol',
},
},
es: {
currency: {
style: 'currency',
currency: 'EUR',
currencyDisplay: 'symbol'
}
}
},
};
export const nuxtI18nOptions: NuxtI18nOptions = {
locales: [
{
code: 'en',
file: 'en.json',
},
{
code: 'de',
file: 'de.json',
},
{
code: 'es',
file: 'es.json'
}
],
langDir: 'lang',
defaultLocale: 'en',
strategy: 'prefix_and_default',
};
Translations
You can find translation files in the apps/web/lang
folder. Each language has its own file.
You can access nested translation keys via dot notation.
<h2>{{ $t('billing.heading') }}</h2>
In composables, you have to explicitly import $i18n
from Nuxt.
const { $i18n } = useNuxtApp();
{ message: $i18n.t('orderErrorMessage') }
Validation
When adding a new translation file, you can extend the existing test suite to automatically check that the file meets the following conditions:
- Contains the same translation keys in all languages
- Contains translations for all keys
To extend the test suite, import your language in i18n.spect.ts
and add two new test cases.
const es = require('../../../lang/es.json')
describe('i18n', () => {
it('has the same keys in English and Spanish', () => {
haveEqualStructure(en, es);
});
it('has values for all Spanish keys', () => {
const valuesEs: Array<string | object> = Object.values(es);
valuesEn.forEach(value => {
hasText(value);
})
});
});