How to use nuxt i18n?

Question

I'm trying to use nuxti18n although there are some examples, none seem to works. I was able to change the lang but its unable to translate.

Docs: https://nuxt-community.github.io/nuxt-i18n/

Everything that is commented It's what already tried

Components/Header.vue

<nuxt-link :to="switchLocalePath('pt')">pt</nuxt-link>
<nuxt-link :to="switchLocalePath('en')">en</nuxt-link>
<nuxt-link :to="switchLocalePath('de')">de</nuxt-link>
<nuxt-link :to="switchLocalePath('fr')">fr</nuxt-link>

nuxt.config.js

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
      '@nuxtjs/auth',
    'bootstrap-vue/nuxt',
    ['nuxt-i18n', {
      locales: [
        //{ code: 'en', iso: 'en-US', langFile: 'en.json' },
        //{ code: 'en', iso: 'en-US', langFile: '~/locales/en.json' },
        //{ code: 'en', iso: 'en-US', langFile: './locales/en.json' },
        //{ code: 'en', iso: 'en-US', langFile: '../locales/en.json' },
        { code: 'en', iso: 'en-US', langFile: 'en.json' },
        { code: 'pt', iso: 'pt-PT', file: 'pt.json' },
        { code: 'de', iso: 'de-DE', file: 'de.json' },
        { code: 'fr', iso: 'ft-FR', langFile: 'fr.json' }
      ],
      langDir: 'locales/' //with and without
      /*vueI18n: {
        fallbackLocale: 'pt',
         messages: {
            //en: require('./locales/en.json'),
            //en: require('en.json'),
            //en: require('locales/en.json'),
            //en: require('./locales/en.json'),
            //en: require('~/locales/en.json'),
            //en: require('../locales/en.json'),
            en: require('~/locales/en.json'),
            fr: require('~/locales/fr.json'),
            de: require('~/locales/de.json'),
            pt: require('~/locales/pt.json')
         }*/
    }]

  ],

/locales/en.json

{
  "crm": {
    "entidades":{
      "editarEntidade":{

      }

    },
    "pesquisa": "Search",
    "pesquisar": "Search...",
    "sim": "Yes",
    "nao": "No",
    "nomeUtilizador": "User name",
    "nome": "Name",
    "email": "Email",
    "admin": "Admin",
    "acoes": "Actions",
    "porPagina": "Per Page",
    "confirmarEliminar": "Do you want to delete the user ",
    "cancelar":"Cancel",
    "confirmar": "Confirm"
  },
  "pt": "Portuguese",
  "en": "English",
  "fr": "French",
  "de": "Germam"
}

console warning (a lot of them)

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

{{$t('crm.cancelar')}} im expecting Cancel but shows crm.cancelar

Thx for helping this newbie :)

You can check [this link out](https://codesandbox.io/s/j1lo65o1k3) for everything you need. (There may be a small load time to boot nuxt) — Ohgodwhy, Apr 30 '19 at 17:29
@Ohgodwhy same exact problem, works fine inside page folder but doesnt translate in Components/Header.vue — pedro miguel, May 02 '19 at 09:28

score 1 · Answer 1 · answered May 07 '19 at 17:17

1

Its working now but no idea why, i removed comments, add name to locales and add lazy: true

Thanks everyone

answered May 07 '19 at 17:17

pedro miguel

25
1
6

I am faced with a similar situation. lazy: true solved my problem thanks! – tolyan May 31 '19 at 08:57

score 0 · Answer 2 · edited Mar 18 '21 at 09:28

0

The official Doc says:

file (required when using lazy) - the name of the file. Will be resolved relative to langDir path when loading locale messages lazily

edited Mar 18 '21 at 09:28

Tomerikoo

18,379
16
47
61

answered Mar 18 '21 at 07:28

Owen Liu

1
1

score 0 · Answer 3 · answered Apr 20 '21 at 07:43

the easyest way is to create directory "locales" on same level as assets, nuxt.config.js, pages, ets.

then import library to modules

modules: [
   ///...

   'nuxt-i18n',
],

then better set my key like

modules: [...],
i18n: {
    locales: [...],
    defaultLocale: 'en',
},

after that add some fields like in this ex:

i18n: {
        locales: ['en', 'ru'], // list of langs
        defaultLocale: process.env.VUE_APP_I18N_LOCALE || 'en', // just for better experience
        langDir: '~/locales/', // here is languages directory
        locales: [ 
// here is files information ( if you have .json format, replace .js with .json
                { code: 'ru', iso: 'ru-RU', file: 'ru.js', },
                { code: 'en', iso: 'en-EN', file: 'en.js', },
            ],
            vueI18n: {
                fallbackLocale: process.env.VUE_APP_I18N_LOCALE || 'en',         
            }
        },

How to use nuxt i18n?

3 Answers3