search

i18next / i18next-vue

Internationalization for Vue 2 & 3 using the i18next ecosystem
https://i18next.github.io/i18next-vue/
MIT License
74 stars 8 forks source link

how to access this.$i18next in composition api setup #3

Closed newbie78 closed 2 years ago

newbie78 commented 2 years ago

when i'm changeLanguage in router.beforeEach -> in template i have old $i18next.language value

kkuegler commented 2 years ago

I'm not sure the heading of the issue is related to the content, but I'll try to reply to both.

The composition API access to i18next-vue is not documented yet. You can use the following

<script setup>
import { useTranslation } from "i18next-vue";
const { t, i18next } = useTranslation();

// console.log(i18next.language); etc
</script>

I'm not an expert fur Vue router. Assuming you are talking about https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards one approach would be to await the promise returned by changeLanguage().

Something like this:

router.beforeEach(async (to, from) => {
  if (needToChangeLanguage()) {
    await i18next.changeLanguage('new-language');
  }
})

Then $i18next.language should be new-language in the components of the route you navigated to.

Let me know if this helps. If doesn't, please share a little bit more context and/or code, so it's easier to see what you are trying to achieve :)

kkuegler commented 2 years ago

Closing due to inactivity. Feel free to comment if you still have the described issue(s).