Locale change in component does not change locale everywhere in app

[LouisVA]

Hi,

I am somehow not capable of changing the locale everywhere on the app. I am also struggling with the documentation as I have to deal with Express + Vue 3 + Composition API + SFC + vite making this configuration a maze.

So some configuration:
in vite.config.js:

return defineConfig({
        plugins: [
            vue(),
            vueI18n({
                // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
                // compositionOnly: false,
                defaultSFCLang: "json",
                include: [
                    path.resolve(__dirname, "./src/locales/en.json"),
                    path.resolve(__dirname, "./src/locales/nl.json"),
                    path.resolve(__dirname, "./src/locales/de.json"),
                ],
            }),
        ]

in main.js

import App from "./App.vue";

import en from "./locales/en.json";
import nl from "./locales/nl.json";
import de from "./locales/de.json";

const i18n = createI18n({
    legacy: false, // necessary for the composition API
    locale: "de", // set locale
    fallbackLocale: "en", // set fallback locale
    availableLocales: ["en", "nl", "de"],
    messages: {
        en: en,
        nl: nl,
        de: de,
    },
    globalInjection: true,
});

const app = createApp(App);
// I've also tried what is in the guide, but doesn't change anything for me:
// const app = Vue.createApp(App,{
//     setup() {
//       const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
//       return { t } // return render context that included `t`
//     }
//   })


app.use(i18n);
app.mount("#app");

Basically in every component I am using translations from en.json/nl.json/de.json and LOCAL translations. Like custom block translations from the vite-plugin-vue-i18n library. That means every component has this:

<template>
<div class="field col-12">
    <div class="text-2xl font-bold">{{ t("title") }}</div>
</div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n({ usescope: "local" });
</script>

<i18n lang="json">
{
    "en": { "title": "foo bar"},
    "nl": {"title": "foo bar"},
    "de": {"title": "foo bar"}
}
</i18n>

So, because I am using this custom block <i18n> in combination with translations from en/de/nl.json, I need to import the t function from use useI18n because if I use the $i18n.t then only translations from en/de/nl.json work (part of the global scope) and the ones in <i18n> are ignored.

So far this works. However when I do a locale change, I have issues that I can't solve.

There are two ways to change the locale, but none actually change the language EVERYWHERE.

OPTION 1 (only local scope)
(Dropdown html event is a PrimeVue element)

<template>
  <Dropdown
        v-model="locale"
        :options="availableLocales.map((locale) => ({ code: locale, name: languages[locale] }))"
        optionLabel="name"
        optionValue="code"
    />
  </template>
  
<script setup>
import { useI18n } from "vue-i18n";
const { t, locale, availableLocales } = useI18n({ useScope: "local" });

const languages = { nl: "Nederlands", en: "English", de: "Deutsch" };
</script>

This will only change the language in this component as expected.

OPTION 2 (using $i18n from globalInjection)

<template>
  <Dropdown
        v-model="$i18n.locale"
         :options="$i18n.availableLocales.map((locale) => ({ code: locale, name: languages[locale] }))"
        optionLabel="name"
        optionValue="code"
    />
  </template>
  
<script setup>
import { useI18n } from "vue-i18n";
const { t, } = useI18n({ usescope: "local" });

const languages = { nl: "Nederlands", en: "English", de: "Deutsch" };
</script>

With this way, when I change the language, the language of this component changes and the language of SIBLING components change. But all the other components including even the parent component do not change??? It is very weird.

When I try v-model="$root.$i18n.locale" then the exact same happens.

The structure of the app is
app
---> mainView.vue
------>userSettingsModal.vue
--------->userProfileTab.vue <- contains the language switch
--------->userOtherTab.vue
--------->userOther2Tab.vue
------>adminSettingsModal.vue
--------->Admin1Tab.vue
--------->Admin2Tab.vue
--------->Admin3Tab.vue
------>routerView

Basically changing the language in userProfileTab.vue changes the language in userProfileTab.vue/userOtherTab.vue/userOther2Tab.vue and also Admin1Tab/Admin2Tab/Admin3Tab but not in userSettingsModal.vue, adminSettingsModal.vue, mainView.vue and routerView
I can also verify that in the components where the language does NOT change, I am using both en.json/de.json/nl.json as <i18n> translations. Both are not updated according to the locale change.

Anyone help me with this maze of a configuration. The documentation is confusing to me as there's a section on SFC, a section on Composition API and then there is the vite-plugin-vue-i18n plugin with it's custom blocks.

You might ask why I want en.json/nl.json/de.json and the <i18n>. Basically the files contain shares translations, the custom blocks contain messages specific to the component. I know there's a sharedMessages possibility too, I have not tried it though. I do feel there's more issues with this setup than I am aware of currently.

[kazupon]

userSettingsModal.vue, adminSettingsModal.vue, mainView.vue and routerView use custom block and Composition API?
If so, you need to set inheriteLocale: true in useI18n.

If you are creating an i18n application that uses both local scope and global scope with custom block, you should basically use global scope.
You should then design localization to determine which scope to use for your application's use cases.
In general, the global scope method should be sufficient. This will make it easier to work with the localization service and allow for integration with the localization workflow.

[Spirit04eK]

@LouisVA
I understand this problem and solve:
If my component use local and global scope in composition api:

const { t } = useI18n({useScope: 'local'});  
const { t: $t } = useI18n({useScope: "global"});  

But i don't like this solution :(

[LouisVA]

@Spirit04eK I think using local is enough, local should inherit from global. My problem was just that only translations in updated and the ones in <script> didn't. To solve that I made all translations in <script> a computed value. Then they would update just like the ones in

[LouisVA]

is this answered?

For me it is. I was trying to solve it in the wrong way, the issue was somewhere else: everything was being translated. It's just that in it will live update the translations. In <script> it won't unless you put the string variables as computed. Otherwise the strings will be calculated on creation of the component and not updated when the user changes languages. By making those variables (strings) computed, it will update.

[LouisVA]

My bad, didnt see how to do that

[parallels999]

On this button