CODEWITHSUNDEEP
vue.jsinternationalizationnuxt.js
Programmeur
Programmeur

Reputation: 1531

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

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.

Upvotes: 9

Views: 9204

Answers (4)

Leopold Kristjansson
Leopold Kristjansson

Reputation: 2784

Maybe very specific to my case, but in case this helps anyone.

My fallback locale was missing. It was defined in á .env file and fetched like so:

defaultLocale: process.env.FALLBACK_LOCALE,

I was however running the code for the first time and did not have the .env file.

Upvotes: 0

Niklas Wolf
Niklas Wolf

Reputation: 1

I spent an hour only to figure out that you must not set your langDir: 'i18n/'. Apparently something gets messed up because the module itself is named like this too... Renaming the folder to something else, for example "lang" fixed the issue...

Upvotes: 0

BinodNepali
BinodNepali

Reputation: 257

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',
      },
    ],
  ]

Upvotes: 13

Dan
Dan

Reputation: 493

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') }}.

Upvotes: 2

Related Questions