vue.jsvue-i18n

Vue 3 i18n Locale Not Updating (Composition API)

I'm trying to change the Vue-i18n locale with a button click. But when I click on the button nothing happened. There is also no error at all. How to fix this?

<button v-on:click.prevent="setLocale('id')">Ind</button>
<button v-on:click.prevent="setLocale('en')">Eng</button>

import i18n from "../i18n";
const setLocale = (lang) => {
  i18n.global.locale = lang;
};
Solution

  • There may be other things, but there's at least one mistake in the code. i18n.global.locale is a ref and should be used as:

    const setLocale = (lang) => {
  i18n.global.locale.value = lang;
};

    It cannot be reactive the other way.