Locale property of useI18n seems as it is not Reactive

[yusuf-io]

Hi vue-i18n authors,
I am working on Vue 3 project and trying to switch locale via URL i18n.locale=to.params.lang. In the components where I am using ...useI18n() inside the return of setup() to retrievelocale , but locale property does not change dynamically as expected.
Thanks!

[kazupon]

setup with object spread (...useI18n({ ... })), it's merged into the render context.
So you need to use locale on the template side.

[yusuf-io]

There is no problem with using locale on the template side, the problem is with its value which is static as set inside createI18n and does not update on the template side when switching locale in URL.

[ux-engineer]

@YusufISMAILOGLU can you use {{ $i18n.locale }} in template?

I'm using Script Setup syntax, and this export seems to work as reactive in the template:

export const { locale } = useI18n();

[yusuf-io]

@ux-engineer thank you for your feedback, but useI18n can be used just inside setup. when
return { ...useI18n() }
locale should be exposed to template and it is true but it is NOT reactive .

[kazupon]

@YusufISMAILOGLU
Could you provide minimum repro codes please?

[yusuf-io]

i18n.js

import { createI18n } from "vue-i18n";
const i18n = createI18n({
  legacy: true,
  locale: process.env.VUE_APP_I18N_LOCALE || "en",
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
  messages: {
    en: {
      msg: "Hello",
    },
    tr: {
      msg: "Merhaba",
    },
  },
});
export default i18n;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/router";
import i18n from "./i18n";
import "./index.css";
// use beforeEach route guard to set the language
router.beforeEach((to, form, next) => {
  // use the language form the routing params or default language
  let language = to.params.lang;
  if (!["en", "tr"].includes(language)) {
    return next("en");
  }
  if (i18n.locale !== language) {
    i18n.locale = language; // update the locale
  }
  return next();
});

createApp(App).use(router).use(i18n).mount("#app");

HelloWorld.vue

<template>
  <h1>{{ t("msg") }} Vue 3.0 + Vite</h1>
  <button @click="count++">count is: {{ count }}</button>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useI18n } from "vue-i18n";

export default {
  name: "HelloWorld",

  setup() {
    const state = reactive({
      count: 0,
    });
    console.log(useI18n().locale.value); //should console the updated value which set in main.js file,
// but it does not and console the default locale which defined in i18n.js
    return {
      ...toRefs(state),
      ...useI18n(),
    };
  },
};
</script>

[kazupon]

Thanks!
and, could you provide vue & vue-i18n version, vue & vue-i18n version please ?

[kazupon]

i18n.js:
if (i18n.locale !== language) {
    i18n.locale = language; // update the locale
  }

You need to use global property i18n instance.
(i18n.global return composer object: https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18n.md)

i18n.js:
if (i18n.global.locale.value !== language) {
    i18n.global.locale.value = language; // update the locale
  }

[kazupon]

i18n.js:
const i18n = createI18n({
  legacy: true,

If set legacy: true, useI18n cannot be used with the composition API.

[yusuf-io]

Thanks!
and, could you provide vue & vue-i18n version, vue & vue-i18n version please ?

vue & vue-i18n version

• vue: 3.0.0
• vite-plugin-vue-i18n: 1.0.0-alpha.2

[yusuf-io]

By using global property i18n instance, it woks fine.
@kazupon appreciate your help.

[ux-engineer]

@YusufISMAILOGLU I'd advise against using this syntax:

return {
  ...useI18n(),
};

This way you are exposing everything to the template when actually needing just one property. Instead consider using object-desctructed properties:

const { locale } = useI18n();

return {
  locale,
};

Also in some cases, you might need to wrap the returned property as ref, but I'm not yet sure when this is needed to be more specific...perhaps not helpful here:

const { locale } = useI18n();

return {
  locale: ref(locale),
};

[yusuf-io]

Actually in my app I use object destructuring, but for purpose of clarity I used ...useI18n() in my aforementioned example.
@ux-engineer Thank you for your advice.