PlentyONE Shop Docs

Appearance

Use i18n in your module ​

Introduction ​

You can use the i18n module of Nuxt.js to add own translations in your module. This guide will show you how to use the i18n module in your module. If you want to use already existing translations from the main repository, you don't need to do anything.

INFO

You need to insert your module before the @nuxtjs/i18n in the modules of your nuxt.config.ts in your PlentyONE Shop repository.

Prerequisites / Preparation ​

This guide requires that you already have created a module. If you haven't created a module yet, you can follow the How-to create a module guide.

Add the @nuxtjs/i18n module to your module repository as a dev-dependency and to the compilerOptions types array in the tsconfig.json.

Scenarios ​

1. Create translations in your module ​

In order to create translations in your module, you need to create a lang folder in your module repository. We recommended the runtime folder as its location. Inside this lang folder, you can create a file for each language you want to support. The file name should be the language code (e.g. en.json for English). After that, you need to hook into the i18n:registerModule hook and add the translations to the i18n module.

typescript
// src/module.ts
// in the setup function

nuxt.hook('i18n:registerModule', (register) => {
  register({
    langDir: resolve('./runtime/lang'),
    locales: [
      {
        code: 'en',
        file: 'en.json',
      },
      {
        code: 'de',
        file: 'de.json',
      },
    ],
  });
});

This will add the translations globally to the i18n module, so that you can use them in your components. It is not possible to override translations from the main repository.