i18next-vue
i18next-vue
npm i i18next-vue
i18next-vue

i18next-vue

Internationalization for Vue 2 & 3 using the i18next ecosystem

by i18next

2.1.1 (see all)License:MITTypeScript:Built-In
npm i i18next-vue
Readme

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

Downloads/wk

3.9K

GitHub Stars

21

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

15

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
2.1.1
latest
14d ago
1.1.0
vue-2
3mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate