Layers

Nuxt i18n module supports layers and will automatically combine i18n configuration of all extended layers. Read more about layers here

Merging strategy

As described in the Nuxt layer authoring guide

• Earlier items in the _layers array have higher priority and override later ones
• The user's project is the first item in the _layers array

Mixing locale configuration such as lazy loading objects and strings may not work as expected, Nuxt i18n will attempt to merge layers as best it can. Consistency of i18n configuration between layers will be most effective.

Pages & Routing

Pages in the pages directory from extended layers will automatically be merged and have i18n support as if they were part of your project.

Page routes defined in i18n.pages in each layer configuration will be merged as well.

Locales

A project extending a layer set up with the Nuxt i18n module needs no additional set up as shown in this example:

export default defineNuxtConfig({
  extends: ['my-layer'],
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    lazy: true,
    langDir: './lang',
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'nl', file: 'nl.json' },
    ],
  },
})

The project is able to use i18n functionality and the configured locales would be loaded provided by the extended layer.

Merging locales

Locales provided by a project will be merged with those provided by extended layers, this can be done as follows:

export default defineNuxtConfig({
  extends: ['my-layer'],
  i18n: {
    langDir: './lang',
    locales: [{ code: 'en', file: 'en.json' }],
  },
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    lazy: true,
    langDir: './lang',
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'nl', file: 'nl.json' },
    ],
  },
})

This example would result in the project supporting two locales (en, nl) and would add the additional messages added for the en locale.

{
  "title": "foo"
}

{
  "title": "layer title",
  "description": "bar"
}

{
  // earlier layers take priority
  "title": "foo",
  "description": "bar"
}

VueI18n options

Options defined in VueI18n configuration files within layers are merged and override each other according to their layers priority.