intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.16k stars 330 forks source link

v-t directive does not rerender when locale switches #1994

Open DerZade opened 2 weeks ago

DerZade commented 2 weeks ago

Reporting a bug?

v-t directive does not update when locale switches

Expected behavior

Changing the locale updates all references of v-t

Reproduction

Stackblitz: https://stackblitz.com/edit/vitejs-vite-3sfn11?file=src%2FApp.vue

GitHub Repo: https://github.com/DerZade/vue-i18n-locale-switching-bug-report

<script setup>
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n({ useScope: 'global' }); // useScope does not matter 
function changeLanguage() {
  locale.value = locale.value === 'en' ? 'ja' : 'en';
  console.log(locale.value);
}
</script>

<template>
  <button @click="changeLanguage">change</button>
  <span v-t="'hello'"></span>
</template>

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (16) x64 AMD Ryzen 7 7840U w/ Radeon  780M Graphics
    Memory: 44.28 GB / 60.63 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v20.18.0/bin/npm
  Browsers:
    Chrome: 129.0.6668.100
  npmPackages:
    @vitejs/plugin-vue: ^5.1.4 => 5.1.4 
    vite: ^5.4.8 => 5.4.9 
    vue: ^3.5.12 => 3.5.12 
    vue-i18n: ^10.0.4 => 10.0.4

Screenshot

No response

Additional context

I started investigating this and found that apparently the composer of the v-t in my example is not the global composer (I don't know why tho, since there is only one instance in the whole app), therefore the watcher for the locale isn't added in the register hook of the directive:

https://github.com/intlify/vue-i18n/blob/43072e83fe185c977424c7a0690ae0d3963a1185/packages/vue-i18n-core/src/directive.ts#L102-L107

Really dumb question: Why can't we just always add the watcher, why does it only work for the global instance?

Validations

kazupon commented 1 day ago

Thank you for your reporting!

Hmm. vue-i18n does not seem to work v-t on legacy mode, currently. you can avoid composition mode. https://stackblitz.com/edit/vitejs-vite-gdnzpe?file=src%2FApp.vue,src%2Fmain.js

Legacy mode will be removed in future versions of vue-i18n. I recommend you will use composition mode.