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.

Upgrade

In the documentation, you can find information on how to upgrade from @panter/vue-i18next, from i18next-vue 3.x or earlier versions.

Installation

``bash
npm install i18next-vue
`

Initialisation

`typescript
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 like (and uses) the versatile t function from 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.

$3

Given the i18next translations

`js
i18next.init({
// ...
resources: {
en: {
// language
translation: {
// the default namespace
insurance: "Insurance",
},
},
de: {
// language
translation: {
// the default namespace
insurance: "Versicherung",
},
},
},
});
`

You can use

`vue

`

$t() works both in Options API and Composition API components.

Using the useTranslation() composition function you can access the i18next instance and t() in the setup part, and e.g. get a t() functions for a specific namespace.

`vue



`

$3

i18next-vue provides a translation component, so you can use markup (including Vue components) in translations.

In this example {faq-link} will be replaced by the faq-link slot, i.e. by the router link. You can move {faq-link} around in the translation, so it makes sense for the target language.

`js
i18next.init({
// ...
resources: {
en: {
translation: {
"message": "Open the {faq-link} page."
"faq": "Frequently Asked Questions"
}
},
fr: {
// ...
}
}
})
`

`vue

`

#### Custom slot values

Custom slot values may be useful when the default braces ({ and }) are wrongly treated by the
Locize service or don't satisfy other needs.

Use custom values for recognizing start and end of the insertion points of the /TranslationComponent
inside the localization term:

`js
// main.js
i18next.init({
// ...
resources: {
en: {
translation: {
"message": "Open the faq-link page."
"faq": "FAQ"
}
},
de: {
// ...
}
}
})

app.use(I18NextVue, {
i18next,
slotStart: '',
slotEnd: '',
});
`

`vue


``

Contributing

$3

- Node.js >= v20