i18next-vue

i18next integration for Vue

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
i18next-vue
6304.0.03 months ago2 years agoMinified + gzip package size for i18next-vue in KB

Popular Searches

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.

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.

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 
<h1>A test in {{ $i18next.language }}</h1>
<p>{{ $t("insurance") }}</p>
``` $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 
<h1>A test in {{ i18next.language }}</h1>
<p>inline: {{ t("insurance") }}</p>
<p>inline with $t: {{ $t("insurance") }}</p>
<p>computed: {{ term }}</p>
```

Translation component

i18next-vue provides a <i18next> 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 
<i18next :translation="$t('message')">
<template #faq-link>
<router-link :to="FAQ_ROUTE">
{{ $t("faq") }}
</router-link>
</template>
</i18next>
```

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 <i18next>/TranslationComponent inside the localization term: ```js // main.js i18next.init({ // ... resources: { 
en: {
translation: {
"message": "Open the <slot>faq-link</slot> page."
"faq": "FAQ"
}
},
de: {
// ...
}
} }) app.use(I18NextVue, { 
i18next,
slotStart: '<slot>',
slotEnd: '</slot>',
}); ``` ```vue 
<i18next :translation="$t('message')">
<template #faq-link>
<router-link :to="FAQ_ROUTE">
{{ $t("faq") }}
</router-link>
</template>
</i18next>
```

Contributing

Requirements

  • Node.js >= v20