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 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 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 {
  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);
    })
  });
});

References

• nuxt/i18n Documentation