vue-i18next2

i18next integration for Vue

npm install vue-i18next2

Usage example

example can work with vue-hackernews-2.0

locales

const locales = {
    en: {
        message: {
            hello: 'Hello!! - EN',
        },
        tos: 'Term of Service',
        term: 'I accept {{1}} {{0}}.',
        loadbundle: 'Load Bundle {{lang}}',
    },
    de: {
        message: {
            hello: 'Hallo!! - DE',
        },
        tos: 'Nutzungsbedingungen',
        term: 'Ich akzeptiere {{0}}. {{1}}',
        loadbundle: 'Bundle Laden {{lang}}',
    },
};

code

 
const i18next = require("i18next");
const VueParams = require('vue-params');
const VueI18Next = require('vue-i18next2');
 
Vue.use(VueParams);
Vue.use(VueI18Next);
 
Vue.params.i18nextLanguage = "en";
 
i18next.init({
    lng: Vue.params.i18nextLanguage,
    fallbackLng: 'en',
    fallbackNS: ['translation'],
    resources: {
        en: { translation: locales.en },
        de: { translation: locales.de },
    },
});
 

const VueParams = require('vue-params');
const VueI18Next = require('vue-i18next2');
 
Vue.use(VueParams);
Vue.use(VueI18Next);
 
Vue.params.i18nextLanguage = "en";
 
VueI18Next.i18n.init({
    lng: Vue.params.i18nextLanguage,
    fallbackLng: 'en',
    fallbackNS: ['translation'],
    resources: {
        en: { translation: locales.en },
        de: { translation: locales.de },
    },
});

vue

{{ $t('tos') }}
{{ $t('tos', { lng: "de" }) }}
{{ $t('tos', { lng: "en" }) }}

vueConfig

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            i18n: '@kazupon/vue-i18n-loader',
        },
    },
}

<i18n>
  {
  "en": {
  "hello": "hello world!"
  },
  "ja": {
  "hello": "こんにちは、世界!"
  }
  }
</i18n>
 
<template>
{{ $t('tos') }}
{{ $t('tos', { lng: "de" }) }}
{{ $t('tos', { lng: "en" }) }}
 
{{ $t('hello') }}
{{ $t('hello', { lng: "ja" }) }}
</template>

others

• @shellybits/vue-i18next
• vue-i18next
• @panter/vue-i18next