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 layers containing lazy-loaded translations is still required to have lazy and langDir options configured.

Extending your project with a layer that contains locales can be done as follows:

nuxt.config.ts
export default defineNuxtConfig({
  extends: ['my-layer'],
  modules: ['@nuxtjs/i18n'],
  i18n: {
    lazy: true,
    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.

project/lang/en.json
{
  "title": "foo"
}
project/my-layer/lang/en.json
{
  "title": "layer title",
  "description": "bar"
}
result
{
  // earlier layers take priority
  "title": "foo",
  "description": "bar"
}