https://github.com/bluelovers/vue-i18next2

i18next integration for Vue
https://github.com/bluelovers/vue-i18next2

i18n i18next vue vue-ssr

Last synced: 3 days ago
JSON representation

i18next integration for Vue

• Host: GitHub
• URL: https://github.com/bluelovers/vue-i18next2
• Owner: bluelovers
• License: mit
• Created: 2017-12-03T05:12:41.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-01T13:24:30.000Z (about 6 years ago)
• Last Synced: 2024-11-06T00:51:48.509Z (7 days ago)
• Topics: i18n, i18next, vue, vue-ssr
• Language: TypeScript
• Homepage:
• Size: 30.3 KB
• Stars: 1
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-i18next2

> i18next integration for Vue

`npm install vue-i18next2`

## Usage example

example can work with [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0)

### locales

```javascript

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

```javascript

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 },

	},

});

```

```javascript

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

```vue

{{ $t('tos') }}

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

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

```

vueConfig

```json

{

	test: /\.vue$/,

	loader: 'vue-loader',

	options: {

		loaders: {

			i18n: '@kazupon/vue-i18n-loader',

		},

	},

}

```

```vue

  {

  "en": {

  "hello": "hello world!"

  },

  "ja": {

  "hello": "こんにちは、世界!"

  }

  }

{{ $t('tos') }}

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

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

{{ $t('hello') }}

{{ $t('hello', { lng: "ja" }) }}

```

## others

* [@shellybits/vue-i18next](https://www.npmjs.com/package/@shellybits/vue-i18next)

* [vue-i18next](https://github.com/rse/vue-i18next)

* [@panter/vue-i18next](https://github.com/panter/vue-i18next)