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 for Vue.js

Silver Sponsors

:loudspeaker: Notice

vue-i18n will soon be transferred to intlify organaization. After that, it will be developed and maintained on intlify.

The vue-i18n that has been released on npm will be released as @intlify/vue-i18n in near future.

Intlify is a new i18n project kickoff by @kazupon. 😉

:book: Documentation

See here

:scroll: Changelog

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

:exclamation: Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

:muscle: Contribution

Please make sure to read the Contributing Guide before making a pull request.

:copyright: License

MIT