# i18next-vue

## Introduction This library is a simple wrapper for [i18next](https://www.i18next.com), simplifying its use in Vue 3. There is also a [Vue 2 version of this package](https://github.com/i18next/i18next-vue/tree/vue-2). ## Upgrade In the [documentation](https://i18next.github.io/i18next-vue/), you can find information on how to [upgrade from `@panter/vue-i18next`](https://i18next.github.io/i18next-vue/migration.html), [from `i18next-vue` 3.x](https://i18next.github.io/i18next-vue/migration-v4.html) or [earlier versions](https://i18next.github.io/i18next-vue/migration-v3.html). ## 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](https://www.i18next.com/overview/api#t). There is [a full tutorial](https://dev.to/adrai/how-to-properly-internationalize-a-vue-application-using-i18next-1doj) for setting up i18next-vue. You can check out the [live demo version](https://codesandbox.io/p/sandbox/i18next-vue-v3-y3p49l?file=%2Fsrc%2Fcomponents%2FTranslationShowCase.vue%3A2%2C22) version of it, too. To learn about more options, check out the [full documentation](https://i18next.github.io/i18next-vue/). ### Simple example 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](https://i18next.github.io/i18next-vue/guide/composition-api.html) you can access the i18next instance and `t()` in the `setup` part, and e.g. get a `t()` functions for a specific namespace. ```vue ``` ### Translation component i18next-vue provides a [`` translation component](https://i18next.github.io/i18next-vue/guide/component-interpolation.html), 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](https://github.com/locize/i18next-locize-backend) 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 ### Requirements - Node.js >= v20

A test in {{ $i18next.language }}

A test in {{ i18next.language }}

	Stars	Issues	Version	Updated	Created
i18next-vue	73	0	5.0.0	a month ago	2 years ago
vue-i18n	2,114	133	10.0.1	5 days ago	10 years ago
vue-intl	14,260	48	6.5.2	4 months ago	8 years ago

i18next-vue vs vue-i18n vs vue-intl

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past