Vue-i18n: Fall back to root locale?

[cslee]

@kazupon When changing $i18n.locale at a component, it doesn't update the root locale. So when a key is not found in the component, the translation falls back to the root which can have a different locale.

To solve this issue, should the root locale be updated when setting $i18n.locale? Or should the locale in _t() be passed to t() so the same locale is used for fallback to root?

[kazupon]

Are you using components based localization?
If so, changes to $18n.locale on component will not be notified to root.

[cslee]

Yes. Thanks for your reply. Our case is as follows.

We are using vue-i18n with SSR. There are many translations over the whole site, so we split the translations into a number of json files. Each component loads only the required json through the <i18n> tag. But we have a set of common translations that are used all over the site. We don't want to include that common json in all components, so we keep it at root.

But it turns out that when we switch the language on client side, the component based localization could be switched to the correct language, but not the root one. So if this is the expected behavior, how should we handle the common translations in this scenario? Thanks.

[kazupon]

This is expected behavior in vue-i18n.

When we used custom blocks in the component, Each components is isolated localization.
However, It is possible change the locale from root.
If you want to change the other components locale from target component, you need to use the global state management (e.g Vuex).

[sudhir600]

I am facing the same issue.
Here is my work scenario. when my page load 1st time, it will be in English (that's working fine) now lets say i change the locale to 'de' and refresh the page. whats happening here is that, my page is being load in English 1st and then less then in second it updating in 'German'. So its looking really a bug.

My setup -

 "dependencies": {
    "vue-i18n": "^7.6.0"
}

added i18n in plugin folder and then initialized in nuxt.config.js as below-

plugins: [  { src: '~/plugins/i18n.js'} ],
vendor: ['vue-i18n']

I don't know where i m doing wrong.
@kazupon @cslee Please suggest.

See this output -
https://user-images.githubusercontent.com/4952560/39049618-dad49b26-44bf-11e8-8b6b-26b47b6bbae9.gif

[aligajani]

This works this.$root.$i18n.locale