I18n-module: this.$i18n.locales undefined when specifying i18n options through component option

[coin-au-carre]

Version

v5.3.0

Reproduction link

https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html

Steps to reproduce

Follow the steps on the first section of Lang Switcher

What is expected ?

this.$i18n.locales should contain an array of 3 objects which are defined in nuxt.js.config.

What is actually happening?

this.$i18n.locales is undefined

TypeError
Cannot read property 'filter' of undefined

Additional comments?

this.$i18n.availableLocales returns an array ['en','es','fr]

_{This bug report is available on Nuxt community (#c365)}

[rchl]

It works in my test sandbox: https://codesandbox.io/s/i18n-plugin-i18nlocales-f82pn

(Just remember that you have to navigate the /en path, for example, as there is no index page generated for default prefix strategy.)

[coin-au-carre]

Ok thank you this is weird if I do this in your code :

 availableLocales() {
      console.log(this.$i18n)
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    }

I can indeed see that this.$i18n.locales is well defined. Something is preventing that on my side...

This is part of my nuxt.config.js. Note that I have defined my locales in the i18n part not the modules one. Can it be the cause ?

 modules: [
    'nuxt-buefy', // Doc: https://buefy.github.io/#/documentation
    'nuxt-fontawesome',
    'nuxt-i18n',
    '@nuxtjs/onesignal',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources'
  ],
  i18n: {
    strategy: 'prefix', // default is prefix_except_default
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English'
      },
      {
        code: 'fr',
        iso: 'fr-FR',
        name: 'Français'
      },
      {
        code: 'ja',
        iso: ' ja-JP',
        name: '日本語'
      }
    ],
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected'
    },
    vueI18nLoader: true,
    // locales: ['en', 'fr', 'ja'],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      silentFallbackWarn: true,
      messages: {
        en: {
          language: 'English'
        },
        fr: {
          language: 'Français'
        },
        ja: {
          language: '日本語'
        }
      }
    }
  }

edit: I tested putting locales in the modules part same problem it is still undefined
edit2: I copy/pasted the i18n part on your sandbox it also works...

[coin-au-carre]

Ok I think I got the problems. Putting a pages/test.vue files works. However if I put this code in layouts/default.vue, it does not work. My vue knowledge is newbish I guess I try to do things I am not supposed to do in layouts/ ?

[rchl]

I've moved the code to layout in my codesandbox example and it still works.

If you can reproduce this problem in codesandbox then I can have a look.

[Holi0317]

Codesandbox sample: https://codesandbox.io/s/i18n-plugin-i18nlocales-it7n5

The $i18n property of current component will get override without nuxt-i18n augmentation if there is an <i18n> tag exist in the SFC with vueI18nLoader enabled in nuxt.config.js

In my test, the format of i18n does not affect this bug. Whether it's yaml or with locale defined will trigger this bug

One workaround (hack) would be to use parent's $i18n, provided parent is not using <i18n> tag

[rchl]

Did some preliminary investigation and found out that this is the code responsible for this behavior:
https://github.com/kazupon/vue-i18n/blob/f42e81f65a88eeeccc311b970d2d4fd4181712ed/src/mixin.js#L33-L42

When there is custom i18n block in a component then options.__i18n is set to plain JSON object and a local $i18n property is created that has original vue-i18n properties copied into it but obviously that doesn't include properties added by nuxt-i18n. That then shadows the root $i18n property.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.