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

Documentation

See the here

Contributing

• 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 kazupon/vue-i18n repository !

Development Setup

# install deps
npm install

# build dist files
npm run build

# lint
npm run lint

# run unit tests only
npm run unit

# run e2e tests only
npm run e2e

# lint & run all tests
npm test

Changelog

Details changes for each release are documented in the CHANGELOG.md.

License

MIT

Changelog

4.3.0 (2016-08-26)

:star: New Features

• add pluralization (#44) by @mmochetti (b5b84d8)

<a name="4.2.3"></a>