this.$i18n.locales is undefined when using yaml-loader

[jovanmaric]

Version

v5.3.0

Reproduction link

https://github.com/jovanmaric/nuxti18n-yaml

Steps to reproduce

• Start with yarn dev.
• Open console to see this.$i18n.locales outputting an array
• Stop server
• Uncomment the build configuration in nuxt.config.js
• Start with yarn dev
• Open console to see undefined

What is expected ?

That this.$i18n.locales returns the locales array even when using component tags.

What is actually happening?

It seems like either vue-i18n-loader or yaml-loader are polluting the this.$i18n namespace

Additional comments?

I've looked at the src, but im not sure how to fix this without side effects. this.i18n seems to be where Vue-i18n is bound to by default, and nuxt-i18n extends on this behaviour.

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

[jovanmaric]

On second inspection, it seems that enabling @kazupon/vue-i18n-loader makes this.$i18n unreadable.

Edit:
I can access the locales with:
console.log(this.$parent.$i18n.locales);

[iliyaZelenko]

@jovanmaric, I watched your code and library code, it's hard to say why this happens, try asking a question in their repository.

[smesterheide]

The same problem occurs when using Component based localization with vue-i18n. I don't think it's related to YAML.

[smesterheide]

I just came back to this issue and this time it works. I could be totally off here, but in my code I am no longer using the locales.name property for the lang-switcher.

[jovanmaric]

I'm unable to test this unfortunately, as I switched to app wide localization, to improve reusability. This issue can be closed as both @iliyaZelenko and @sambrezo are referring to the vue-i18n as the major culprit.

Edit: Hope github delegates the closing of an issue to cmty...... it does

[arambert]

I'm facing the same issue:

• vue-i18n-loader sets this.$options.__i18n with the content of the custom i18n block
• when vue-i18n runs its beforeCreate from mixin (https://github.com/kazupon/vue-i18n/blob/master/src/mixin.js#L9) it sets options.i18n to this.$options.__i18n which is now a json object instead of being null
• then the test (https://github.com/kazupon/vue-i18n/blob/master/src/mixin.js#L11) is true instead of being false
• so the line https://github.com/kazupon/vue-i18n/blob/master/src/mixin.js#L69 which is supposed to fill in this.options._i18n with the app.$i18n is never reached
  => special nuxt-i18n attributes like locales & differentDomains are not set on the Vue instance $i18n attribute, and switchLocalePath is broken when using differentDomains

It does not matter if it's YAML or JSON.

I don't know if this bug should be nuxt-i18n responsability or vue-i18n responsability, but there is a bug.

[arambert]

When I remove the custom i18n block from the component it works again... magic isn't it? ;)

[arambert]

As a temporary workaround I add these lines in a beforeMount function in the components where I need locales or switchLocalePath:

this.$i18n['differentDomains'] = this.$root.$i18n['differentDomains']
this.$i18n['locales'] = this.$root.$i18n['locales']

[sustained]

Thanks for the workaround.

[mateusz-owczarek]

Thanks for the workaround! Just for future reference, if you're using SSR, you should put those two lines in the beforeCreate method. The other lifecycle hooks, except created, are not called server-side. Otherwise, simply use this.$root.$i18n.locales directly.