vue-i18n

What is vue-i18n?

The vue-i18n package is a Vue.js plugin for internationalization. It integrates seamlessly with Vue.js applications to enable easy localization and translation of text content within the app. It supports a variety of features including pluralization, datetime formatting, number formatting, and allows for the organization of translation messages in different locales.

What are vue-i18n's main functionalities?

Localization

This feature allows you to localize your application's content. You can define translation messages for different locales and use the $t function to display the translated message based on the current locale.

{"template": "<p>{{ $t('message.hello') }}</p>", "i18n": {"messages": {"en": {"message": {"hello": "Hello World!"}}, "fr": {"message": {"hello": "Bonjour le monde!"}}}}}

Pluralization

Pluralization support allows you to handle singular and plural forms of words depending on the count. The $tc function is used to handle this, and it automatically selects the correct form based on the provided count.

{"template": "<p>{{ $tc('message.plural', 1) }}</p><p>{{ $tc('message.plural', 10) }}</p>", "i18n": {"messages": {"en": {"message": {"plural": "{n} apple|{n} apples"}}}}}

DateTime Formatting

DateTime formatting enables you to format dates and times according to the locale's conventions. The $d function is used to format a JavaScript Date object into a readable string.

{"template": "<p>{{ $d(new Date(), 'short') }}</p>", "i18n": {"dateTimeFormats": {"en": {"short": {"year": "numeric", "month": "short", "day": "numeric"}}}}}

Number Formatting

Number formatting allows you to format numbers in a locale-sensitive manner. The $n function is used to format numbers, such as currencies, percentages, or decimal numbers, according to the locale's formatting rules.

{"template": "<p>{{ $n(1234567.89, 'currency') }}</p>", "i18n": {"numberFormats": {"en": {"currency": {"style": "currency", "currency": "USD"}}}}}

Other packages similar to vue-i18n

react-intl

React Intl is similar to vue-i18n but is designed for React applications. It provides a set of React components and an API to format dates, numbers, and strings, including pluralization and handling translations.

i18next

i18next is a full-featured i18n library for JavaScript. It works with various frameworks, including React, Vue, and Angular. It offers features like pluralization, formatting, and supports backend loading of translation resources, making it a versatile alternative to vue-i18n.

polyglot.js

Polyglot.js is a tiny I18n helper library written in JavaScript, influenced by the Ruby library I18n. It doesn't have direct integration with Vue.js but can be used in any JavaScript application for simple translation purposes, with a straightforward API for interpolation and pluralization.

angular-translate

Angular Translate is an AngularJS module for internationalization. It provides services and directives that enable translation support similar to vue-i18n but is specifically tailored for AngularJS applications.

README

vue-i18n

Internationalization plugin of Vue.js

Requirments

• works with Vue.js ^0.10.4

Instllation

component

$ component install kazupon/vue-i18n

bower

$ bower install vue-i18n

browserify

$ npm install vue-i18n

Usage

v-t directive

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

// ready translated locales
var locales = {
  en: {
    message: {
      hello: 'the world'
    }
  },
  ja: {
    message: {
      hello: 'ザ・ワールド'
    }
  }
}

// set plugin
Vue.use(i18n, {
  lang: 'ja',
  locales: locales // NOTE: 'resources' is deprecated
})

// create instance
new Vue({
  el: '#test-i18n'
})

Template the following:

<div id="test-i18n" class="message">
  <p v-t="message.hello"></p>
</div>

Output the following:

<div id="test-i18n" class="message">
  <p>ザ・ワールド</p>
</div>

Vue.t function

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

// ready translated locales
var locales = {
  en: {
    message: {
      hello: 'the world'
    }
  },
  ja: {
    message: {
      hello: 'ザ・ワールド'
    }
  }
}

// set plugin
Vue.use(i18n, {
  lang: 'en',
  locales: locales
})

console.log(Vue.t('message.hello')) // output the 'the wolrd'

$t method (for 0.11.4 later)

<div id="message">
Message:<br>{{$t('message.hello')}}
</div>

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

// ready translated locales
var locales = {
  en: {
    message: {
      hello: 'the world'
    }
  },
  ja: {
    message: {
      hello: 'ザ・ワールド'
    }
  }
}

// set plugin
Vue.use(i18n, {
  lang: 'en',
  locales: locales
})

new Vue().$mount('#message')

render the following:

<div id="message">
Message:<br>the world
</div>

Testing

$ make test

TODO

See the TODO.md

License

MIT

See the LICENSE.