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 @nuxtjs/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 steps when configuring @nuxtjs/i18n:

• Set lazy option to true (or to configuration object if you want to customize some options).
• Set langDir option to the directory (can not be empty) that contains your translation files.
• Configure locales option as an array of object, where each object has a file key whose 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.

Example files structure:

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

Configuration example:

export default defineNuxtConfig({  // ...  i18n: {    locales: [      {        code: 'en',        file: 'en-US.json'      },      {        code: 'es',        file: 'es-ES.json'      },      {        code: 'fr',        file: 'fr-FR.json'      }    ],    lazy: true,    langDir: 'lang',    defaultLocale: 'en'  },  // ...})