Getting started

Install the package via

npm

npm install i18next-vue

yarn

yarn add i18next-vue

pnpm

pnpm add i18next-vue

Requirements

• Vue.js 3.x
  • there is a separate Vue 2 version of this library
• i18next: 23.x or newer (19.x or newer for version 2)

Setup

See the i18next documentation for setting it up. i18next-vue does not need a lot of setup on top of that.

Recommended i18next options

We do recommend to set the interpolation: {escapeValue: false} option (i18next docs), because - except in v-html - Vue will already properly escape values intended as plain text.

Also, fallbackLng: false is a good idea, if you don't explicitly use that.

If you have no i18next setup yet, you can also check out this tutorial blogpost for setting up both i18next and i18next-vue.

import { createApp } from 'vue';
import i18next from 'i18next';
import I18NextVue from 'i18next-vue';

i18next.init({
  lng: 'de',
  interpolation: {
    escapeValue: false
  },
  fallbackLng: false,
  resources: {
    ...
  }
});

const app = createApp(/* ... */);
app.use(I18NextVue, {i18next});
app.mount('#app')

Simple usage

Use the instance function $t in your Vue components to translate. See Component-based localization for more details. The i18next documentation details all the translation options available through $t() (also known as t() in the i18next docs).

<template>
  <div class="container">
    {{ $t('greeter.hello-world') }}
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    logSomething() {
      console.log(this.$t('common.hello'));
    },
  },
};
</script>

Plugin options

You can use these options during plugin registration:

app.use(I18NextVue, {
  i18next: myI18next,
  rerenderOn: ['initialized', 'languageChanged', 'loaded'],
});

Option		Description
18next	Required	The 'i18next' instance to use.
rerenderOn	Optional Default: Refresh on all relevant events.	Listen for 'i18next' events and refreshes components that use translations. This is a string array. Supported values include: 'initialized', 'languageChanged', 'loaded', 'added' and 'removed'. Check the i18next events documentation for more information. For 'added' and 'removed' see the i18next store documentation
slotStartSince 2.2.0	Optional Default: {	Beginning of a slot in the translation component.
slotEndSince 2.2.0	Optional Default: }	End of a slot in the translation component.
legacyI18nOptionsSupportSince 3.0	Optional Default: false	Enables i18nOptions support in v3. This support is removed in v4. v2 supports i18nOptions by default.