i18next-vue

# Getting started

Install the package via

# Requirements

# Setup

See the i18next docs (opens new window) for setting it up. i18next-vue does not need a lot of setup on top of that.

import Vue from 'vue';
import i18next from 'i18next';
import I18NextVue from 'i18next-vue';

i18next.init({
  lng: 'de',
  resources: {
    ...
  }
});

Vue.use(I18NextVue, {i18next});

new Vue({
  ...
});

# Simple usage

Use the instance function $t in your Vue components to translate. See Component based localization for more details. The i18next documentation (opens new window) details all the translation options available through $t() (also known as t() in the i18next docs (opens new window)).

<template>
    <div class="container">
     {{$t("greeter.hello-world")}}
    </div>
<template>

<script>
export default({
  // ...
  methods: {
    logSomething() {
      console.log(this.$t("common.hello"))
    }
  }
});
</script>

# Plugin options

You can use these options during plugin registration:

Vue.use(I18NextVue, {
  i18next: myI18next,
  rerenderOn: ['initialized', 'languageChanged', 'loaded'],
});
Name Description
i18next Required The 'i18next' instance to use.
rerenderOn Optional
Default: Refresh on all relevant events.		 Listen for 'i18next' events and refreshes components that use translations.
This is a string array. Supported values includ: 'initialized', 'languageChanged', 'loaded', 'added' and 'removed'.
Check the i18next events documentation (opens new window) for more information. For 'added' and 'removed' see the i18next store documentation (opens new window)

← Component-based localization →