i18next-vue

Introduction

This library is a simple wrapper for i18next, simplifying its use in Vue 3.

There is also a Vue 2 version of this package.

Installation

npm install i18next-vue

Initialisation

import Vue from "vue";
import i18next from "i18next";
import I18NextVue from "i18next-vue";
import App from "./App.vue";

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

// to wait for loading the translations first, do this instead:
// i18nInitialized.then(() => createApp(App).use(I18NextVue, { i18next }).mount('#app'));

Usage

Use the $t translation function, which works analogously to the t function found in i18next.

There is a full tutorial for setting up i18next-vue. You can check out the live demo version version of it, too.

To learn about more options, check out the full documentation. This also outlines the migration path from @panter/vue-i18next.

Simple example

<i18n>
{
    "en": {
        "insurance": "Insurance"
    },
    "de": {
        "insurance": "Versicherung"
    }
}
</i18n>

<template>
    <h1>A test in {{ $i18next.language }}</h1>
    <p>{{ $t('insurance') }}</p>
</template>

Using the composition API you can access the i18next instance and t() as well:

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

<template>
  <h1>A test in {{ i18next.language }}</h1>
  <p>inline: {{ t("insurance") }}</p>
  <p>computed: {{ term }}</p>
</template>

Contributing

Requirements

• node.js >= v16