Locale property of useI18n seems as it is not Reactive about vue-i18n-next HOT 13 CLOSED

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.

from vue-i18n-next.

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

from vue-i18n-next.

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.

from vue-i18n-next.

@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();

from vue-i18n-next.

@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 .

from vue-i18n-next.

@YusufISMAILOGLU
Could you provide minimum repro codes please?

from vue-i18n-next.

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>

from vue-i18n-next.

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

from vue-i18n-next.

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
  }

from vue-i18n-next.

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

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

from vue-i18n-next.

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

from vue-i18n-next.

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

from vue-i18n-next.

@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),
};

from vue-i18n-next.