Skip to content

Accessing i18next

Similar to the $t() function you can access the i18next instance as $i18next in your components.

Wait for i18next to be initialized

vue
<template>
  <div v-if="$i18next.isInitialized">
    <h1>A test in {{ $i18next.language }}</h1>
    <p>Translation {{ t("insurance") }}</p>
  </div>
</template>

Change the language in a component

vue
<template>
  <div>
    <a v-on:click="changeLanguage('de')">DE</a>
  </div>
</template>
<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18next.changeLanguage(lang);
    }
  }
};
</script>

Change the language globally

javascript
import i18next from 'i18next';

...

i18next.changeLanguage('it');