Lazy-load translations

For apps that contain a lot of translated content, it is preferable not to bundle all the messages in the main bundle but rather lazy-load only the language that the users selected. This can be achieved with nuxt-i18n by letting the module know where your translation files are located so it can dynamically import them when the app loads or when the user switches to another language. To enable translations lazy-loading, follow these 4 steps when configuring nuxt-i18n:

• Set lazy option to true.
• Set langDir option to the directory (can not be empty) that contains your translation files. Only *.js, *.ts and *.json files will be loaded.
• Configure locales option as an array of object, where each object has a file key which value is the translation file corresponding to the locale.
• Optionally, remove all messages that you might have passed to vue-i18n via vueI18n option.
• Each file can return either an Object or a function (supports Promises).

Example files structure:

nuxt-project/
├── lang/
│   ├── en-US.js
│   ├── es-ES.js
│   ├── fr-FR.js
├── nuxt.config.js

Configuration example:

['nuxt-i18n', {
  locales: [
    {
      code: 'en',
      file: 'en-US.js'
    },
    {
      code: 'es',
      file: 'es-ES.js'
    },
    {
      code: 'fr',
      file: 'fr-FR.js'
    }
  ],
  lazy: true,
  langDir: 'lang/',
  defaultLocale: 'en'
}]

Language file example:

export default async (context, locale) => {
  return await Promise.resolve({
    welcome: 'Welcome'
  })
}

// or

export default {
  welcome: 'Welcome'
}