i18n

This is where all the config goes for our i18n plugin for internationalisation. We also have our language file store here as js files.

Each language has a module.exports with all language translations inside this object.

Configuration

We need to add the locales as an array of languages and specify the code, iso, name and file that contains the default exported javascript of the language translations.

locales: [
  {
    code: 'en',
    iso: 'en-US',
    name: 'English',
    file: 'en.js',
  },
]

There are many options we can choose from and for all options please refer to the nuxt-i18n plugin docs.

defaultLocale to be English

  defaultLocale: 'en',

Seo to be false as this slows performance. However we then all to the head of the layout/page component a const i18nSeo to tackle this problem. This is more performant and is explianed in nuxt-i18n plugin docs.

  seo: false,

lazy to be true so we can lazy load languges

  lazy: true,

Name the langDir so we know where to lazy load the languages from

  langDir: 'i18n/',

Set parse pages to false as By default, custom routes are extracted from page files using acorn parsing

  parsePages: false,

Vuex set to false as we are not using the vuex store

  vuex: {
    moduleName: 'i18n',
    mutations: {
      setLocale: false,
      setMessages: false,
    },
    preserveState: false,
  },

Pages is here we define what pages are called in other languages for the url. For linking to these pages we only have to call the actual page component name and then this plugin will convert that url for each language. If non is defined here then all languages will use the page component's name as the url.

  pages:{
    contact: {
      en: '/contact',
      es: '/contacto',
    },
  }

We have set the fallbackLocale to be English

vueI18n: {
    fallbackLocale: 'en',
  },