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 plentysystems system settings.
- The
fallbackLocale
ini18n.config.ts
has to match the system default language. - The
defaultLocale
innuxt.config.ts
has to match the system default language.
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 plentysystems 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 defineI18nConfig(() => ({
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'
}
}
},
}));
nuxt.config.ts
[
'@nuxtjs/i18n',
{
locales: [
{
code: 'en',
file: 'en.json',
},
{
code: 'de',
file: 'de.json',
},
{
code: 'es',
file: 'es.json'
}
],
lazy: true,
langDir: 'lang',
defaultLocale: 'en',
},
],
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);
})
});
});