Load yaml files in nuxt-i18n

How do I load my locales from yaml files in Nuxt 2 using nuxt-i18n?

I already added the paths to my nuxt.config.js:

{
  i18n: {
    vueI18nLoader: true,
    langDir: '~/locales/',
    locales: [
      { code: 'en', iso: 'en-GB', file: 'en.yaml', dir: 'ltr' },
      { code: 'de', iso: 'de-DE', file: 'de.yaml', dir: 'ltr' },
    ],
    defaultLocale: 'en',
  }
}

I enabled vue-i18n-loader which brings automatic yaml support and i18n blocks.

You can configure Nuxt to use the yaml-loader for your locales:

// nuxt.config.js
{
  // ...
  build: {
    // ...
    extend(config) {
      config.module.rules.push({
        test: /\.ya?ml$/,
        type: 'json',
        use: 'yaml-loader'
      })
    }
  }
}

Learn more about extending the Webpack configuration in Nuxt, here: https://nuxtjs.org/docs/configuration-glossary/configuration-build#extend

This will allow you to load yaml files for nuxt-i18n / vue-i18n. However, it will also clash with the custom i18n block (<i18n>) in your Vue components (given you use the SFC pattern).

To prevent this, you can change the above rule to only apply to yaml files in your locales/ directory (or any other directory you would like):

// nuxt.config.js
{
  // ...
  build: {
    // ...
    extend(config) {
      config.module.rules.push({
        test: /locales\/.*\.ya?ml$/, // <---
        type: 'json',
        use: 'yaml-loader'
      })
    }
  }
}

Now you can use both i18n blocks as well as yaml files from your locales/ directory.