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

Which dist file to use?

From CDN or without a Bundler

• vue-i18n(.runtime).global(.prod).js:

  • For direct use via <script src="..."> in the browser. Exposes the VueI18n global
  • Note that global builds are not UMD builds. They are built as IIFEs and is only meant for direct use via <script src="...">
  • In-browser locale messages compilation:
    • vue-i18n.global.js is the "full" build that includes both the compiler and the runtime so it supports compiling locale messages on the fly
    • vue-i18n.runtime.global.js contains only the runtime and requires locale messages to be pre-compiled during a build step
  • Inlines internal the bellow packages - i.e. it’s a single file with no dependencies on other files. This means you must import everything from this file and this file only to ensure you are getting the same instance of code
    • @intlify/shared
    • @intlify/message-compiler
    • @intlify/core
  • Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the *.prod.js files for production

• vue-i18n(.runtime).esm-browser(.prod).js:

  • For usage via native ES modules imports (in browser via <script type="module">)
  • Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build

With a Bundler

• vue-i18n(.runtime).esm-bundler.js:
  • For use with bundlers like webpack, rollup and parcel
  • Leaves prod/dev branches with process.env.NODE_ENV guards (must be replaced by bundler)
  • Does not ship minified builds (to be done together with the rest of the code after bundling)
  • Imports dependencies (e.g. @intlify/core-base, @intlify/message-compiler)
    • Imported dependencies are also esm-bundler builds and will in turn import their dependencies (e.g. @intlify/message-compiler imports @intlify/shared)
    • This means you can install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version
  • In-browser locale messages compilation:
    • vue-i18n.runtime.esm-bundler.js (default) is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via module field in package.json) because when using a bundler templates are typically pre-compiled (e.g. in *.json files)
    • vue-i18n.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)

For Node.js (Server-Side)

• vue-i18n.cjs(.prod).js:

  • For CommonJS usage in Node.js
  • For use in Node.js via require()
  • If you bundle your app with webpack with target: 'node' and properly externalize vue-i18n, this is the build that will be loaded
  • The dev/prod files are pre-built, but the appropriate file is automatically required based on process.env.NODE_ENV

• vue-i18n(.runtime).node.mjs:

  • For ES Moudles usage in Node.js
  • For use in Node.js via import
  • The dev/prod files are pre-built, but the appropriate file is automatically required based on process.env.NODE_ENV
  • This module is proxy module of vue-i18n(.runtime).mjs
    • vue-i18n.runtime.node.mjs: is runtime only
    • vue-i18n.node.mjs: includes the runtime compiler

NOTE: ES Modules will be the future of the Node.js module system. The vue-i18n.cjs(.prod).js will be deprecated in the future. We recommend you would use vue-i18n(.runtime).node.mjs. 9.3+

For Bundler feature flags

Build Feature Flags

The esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

• __VUE_I18N_FULL_INSTALL__ (enable/disable, in addition to vue-i18n APIs, components and directives all fully support installation: true)
• __VUE_I18N_LEGACY_API__ (enable/disable vue-i18n legacy style APIs support, default: true)
• __INTLIFY_DROP_MESSAGE_COMPILER__ (enable/disable whether to tree-shake message compiler when we will be bundling)

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree shaking in the final bundle. To configure these flags:

• webpack: use DefinePlugin
• Rollup: use @rollup/plugin-replace
• Vite: configured by default, but can be overwritten using the define option

Note: the replacement value must be boolean literals and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.

©️ License

MIT