Yet another internationalization plugin for Vue.js.

• Vue.js ^1.0.24
• JQuery ^2.2.4

$ npm install vue-i18n-plugin

$ bower install vue-i18n-plugin

JSON file: resources/i18n/en-US.json

{
  "message": {
    "hello": "Hello",
    "world": "World"
  }
}

JSON file: resources/i18n/zh-CN.json

{
  "message": {
    "hello": "您好",
    "world": "世界"
  }
}

var Vue = require('vue');
var i18n = require('vue-i18n');

// set plugin
Vue.use(i18n, {
  baseUrl: 'resources/i18n'
});

// create instance
new Vue({
  el: '#test-i18n',
  beforeCompile: function() {
    this.$setLanguage("zh-CN");
  },
  methods: {
    switchLanguage: function(lang) {
      this.$setLanguage(lang);
    }
  }
});

Template the following:

<div id="test-i18n" class="message">
  <p>Language: {{$language}}</p>
  <p>{{$i18n.message.hello}}, {{$i18n.message.world}}</p>
</div>

Output the following:

<div id="test-i18n" class="message">
  <p>Language: zh-CN</p>
  <p>您好, 世界</p>
</div>

This plugin could work together with the vue-format plugin.

JSON file: resources/i18n/en.json

{
  "message": {
    "hello": "Hello {0}, {1}!"
  }
}

Template the following:

<div class="message">
  <p>{{ $i18n.message.hello | format "world" 123 }}</p>
</div>

Output the following:

<div class="message">
  <p>Hello world, 123!</p>
</div>

Sets the current language. Calling this value will reload the localization files according to the new language and change the current displayed language.

• lang: the code of the new language.

Stores the current language.

An object which contains the localization messages for the current language.

Vue.use(plugin, {
  baseUrl: "i18n"
  fallbackLanguage: "en-US",
  timeout: 500,
  async: false
})

Specify the base URL of the localization files, which could be either an absolute URL, or a relative URL relative to the current javascript file.

The default value of this option is i18n.

Specify the code of the fallback langauge. If the localization file of the current language cannot be load, the localization file of the fallback language will be load.

The default value of this option is en-US.

The timeout for the AJAX calls, in milliseconds. Default value is 500.

Indicates whether to load the localization file asynchronously. Default value is false.

• Fork it !
• Create your top branch from dev: git branch my-new-topic origin/dev
• Commit your changes: git commit -am 'Add some topic'
• Push to the branch: git push origin my-new-topic
• Submit a pull request to dev branch of Haixing-Hu/vue-i18n repository !

First you should install all depended NPM packages. The NPM packages are used for building and testing this package.

$ npm install

Then install all depended bower packages. The bower packages are depended by this packages.

$ bower install

Now you can build the project.

$ gulp build

The following command will test the project.

$ gulp test

The following command will perform the test and generate a coverage report.

$ gulp test:coverage

The following command will perform the test, generate a coverage report, and upload the coverage report to coveralls.io.

$ gulp test:coveralls

You can also run bower install and gulp build together with the following command:

npm run build

Or run bower install and gulp test:coveralls together with the following command:

npm run test

MIT