Vue-i18n: Best practices for switching locale in app?

[awitherow]

I am building an application where it is unsure which language the user will use, as their location will not be sufficient to predetermine their language of choice.

Is there a best practice for setting a locale with a technology such as vuex and using this locale with vue-i18n?

Thank you!

Austin

[websanova]

Just load it.

I use $store but I would imagine you could port this quite easily.

~~~
module.exports = {

loaded: false,

set: function(lang) {
    if ( ! this.$store.settings.lang) {
        this.$store.set('lang.loaded', true);

        return;
    }

    this.$http.get(this.$env.get('APP_URL') + '/i18n/' + lang + '.json').then(function (res) {                    
        Vue.config.lang = lang;
        Vue.locale(lang, res.data);

        this.$store.set('lang.loaded', true);
    });
}

}
~~~

[awitherow]

@websanova thanks, I will give it a try and let you know how it works. Then, I'll open up a documentation PR with my findings so that others will know ideas how to best handle this?

[ACollectionOfAtoms]

Any progress @awitherow ?

[awitherow]

Nope not at all @ACollectionOfAtoms :) I have been preoccupied with other things to be honest.

If you want to take it over, feel free.

[ndabAP]

@awitherow, use a mixin. Check this:

https://github.com/ndabAP/Vue.js-with-Sails.js-backend-example-project/tree/master/frontend/src

[awitherow]

Here yeah @ndabAP ? https://github.com/ndabAP/Vue.js-with-Sails.js-backend-example-project/blob/master/frontend/src/main.js#L58

[ndabAP]

Exactly, you can switch the locale easily everywhere inside your application.

[TimotheeJeannin]

Would be nice to put an example in the documentation maybe ?

[kazupon]

close, due to exists workaround the below:
https://kazupon.github.io/vue-i18n/en/lazy-loading.html