i18next integration for Vue
Switch branches/tags
Nothing to show
Clone or download
Latest commit d6ac39f Nov 1, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fake update Nov 1, 2018
test . (Step: 1) Dec 3, 2017
.gitignore fake update Nov 1, 2018
.npmignore fake update Nov 1, 2018
LICENSE Initial import Jul 28, 2017
README.md vue-loader (Step: 1) Dec 3, 2017
README.shellybits.md update README (Step: 1) Dec 3, 2017
index.d.ts fake update Nov 1, 2018
index.js fake update Nov 1, 2018
index.ts fake update Nov 1, 2018
package.json fake update Nov 1, 2018
tsconfig.json . (Step: 2) Dec 3, 2017

README.md

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