Is there a way to watch a change of the i18n's current locale?
Asked Answered
N

4

12

How can I call a function when the language/locale changes while using i18n?
Should I use Vuex or does vue-i18n has a method that allows me to do that?

Nolannolana answered 17/4, 2021 at 17:52 Comment(1)
Please include more information about you are trying to do, e.g. what command are you trying to run with the vue cli?Premonish
P
17

You could watch $i18n.locale for any changes but usually, you do change this kind of thing. What is your use-case for such need ?

watch: {
  '$i18n.locale': function(newVal, oldVal) {
    console.log('locale change', newVal)
  }
}
Pockmark answered 17/4, 2021 at 18:8 Comment(2)
This does not work. Nothing is triggered by changes on i18n.locale. To be clear, my i18n mechanism is working fine, only this watch is not. I tried the rule with and without the leading dollar sign. I'm on vue 2.6.12, vue-i18n 8.22.4 and vuex 3.6.2. I'm not downvoting this because versions could be the issue, but for the 13 of you that upvoted this, I would like to know how did this work.Gertie
@Gertie not sure why this is not working for you, it all depends on how you implemented it I suppose. Usual way is to work with $i18n hence why the watcher should work. Still, if it's not feel free to ask a new question with a minimal reproducible example or at least all the relevant details regarding your configuration.Pockmark
R
6

Not sure about your setup, but with Vue3 in SFC I am using it as follows:

New Way:

(changed according to @kissu's tip)

<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t, locale } = useI18n();

watch(locale, () => {
  console.log('locale', locale.value);
});
</script>

It fires every time the locale changes (for example with a language toggle outside of the actual file/component).


Old Way:

<script setup lang="ts">
import i18n from '@/i18n';

const locale = ref(i18n.global.locale);

watch(locale, () => {
  console.log('locale', locale.value);
});
</script>
Rubellite answered 20/10, 2022 at 8:31 Comment(1)
If you want a try Composition API-y way of doing this, I recommend using useI18n and t even: vue-i18n.intlify.dev/guide/advanced/composition.htmlPockmark
H
1

This worked for me (based on the "old way" @goldensoju mentioned):

const currentLocale = computed(() => i18n.global.locale)

watch(currentLocale, (value) => {
  console.log(`locale change: ${value}`)
})
Hortatory answered 5/9, 2023 at 6:58 Comment(0)
C
0

I needed it in a Nuxt 3 application using yup. Managed to do it with custom plugin (it will be included automatically):

plugins/yup-18n.ts

import { setLocale } from 'yup';
import { de, en } from 'yup-locales';

export default defineNuxtPlugin((nuxtApp) => {
  const locale = nuxtApp.vueApp.$nuxt.$i18n.locale;

  // set yup locale initially
  setLocale(locale.value === 'en' ? en : de);

  // and after changes
  watch(locale, () => {
    setLocale(locale.value === 'en' ? en : de);
  });
});
Courtroom answered 10/7, 2024 at 17:55 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.