vue3-i18next

This is the repository for Vue i18next for Vue3. If you use i18next for Vue2, see this repository.

Install

$ npm install -S vue3-i18next

or

$ yarn add vue3-i18next

Requirements

• vue >= 3.2.0
• i18next >= 21.0.0

Usage

Init

import { createApp } from "vue";
import { createI18n } from "vue3-i18next";
import i18next, { InitOptions } from "i18next";

import App from "./App.vue";

const locales = {
  en: {
    message: {
      hello: 'Hello!',
      loadbundle: 'Load bundle language: {{lang}}',
    },
  },
};

const options: InitOptions = {
  initImmediate: false,
  lng: "en",
  fallbackLng: "en",
  saveMissing: true,
  resources: {
    en: {
      translation: locales.en,
    },
  },
};
i18next.init(options);
const i18n = createI18n(i18next);

const app = createApp(App);
app.use(i18n);
app.mount("#app");

Component based localization

<template>
  <div id="app">
    <p>{{ $t('message.hello') }}</p>
    <p>{{ loadbundle() }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useI18next } from "vue3-i18next";

export default defineComponent({
  name: 'App',
  setup() {
    const i18n = useI18next();
    const loadbundle = () => i18n.t('message.loadbundle', {lang: 'en'});

    return {
      loadbundle,
    };
  },
});
</script>

License

The software is available as open source under the terms of the MIT License.