vue: nuxt-i18n: Cannot translate the value of keypath

Question

I am using nuxt-i18n to translate my page, but it can't find translation strings.

My setup:

nuxt.config.js

modules: [
    [
      'nuxt-i18n', {
        locales: [
          {
            code: 'en',
            name: 'English',
            iso: 'en-US',
            langFile: 'en_US.js',
          },
          {
            code: 'pt',
            name: 'Português',
            iso: 'pt-BR',
            langFile: 'pt_BR.js',
          },
        ],
        loadLanguagesAsync: true,
        langDir: 'locales/',
        defaultLocale: 'en',
      },
    ],
  ],

locales/en_US.js

export default {
  Greeting: 'Hello',
  Sign_up: 'Sign up',
};

file.vue

{{ $t('Greeting') }}

Console:

WARN [vue-i18n] Cannot translate the value of keypath 'Login'. Use the value of keypath as default.

Answer 1

The warning says it all - you don't have the Login message defined in the en_US.js file.

Somewhere in your app you're certainly calling {{ $t('Login') }}.

Answer 2

The solution is setting a lazy property value to true. Below is the code snippet.

modules: [
    [
      'nuxt-i18n', {
        lazy:true,
        locales: [
          {
            code: 'en',
            name: 'English',
            iso: 'en-US',
            langFile: 'en_US.js',
          },
          {
            code: 'pt',
            name: 'Português',
            iso: 'pt-BR',
            langFile: 'pt_BR.js',
          },
        ],
        loadLanguagesAsync: true,
        langDir: 'locales/',
        defaultLocale: 'en',
      },
    ],
  ]