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.
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"}}}}}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 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 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 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.
Internationalization plugin for Vue.js
vue-i18n(.runtime).global(.prod).js:
<script src="..."> in the browser. Exposes the VueI18n global<script src="...">vue-i18n.global.js is the "full" build that includes both the compiler and the runtime so it supports compiling locale messages on the flyvue-i18n.runtime.global.js contains only the runtime and requires locale messages to be pre-compiled during a build step@intlify/shared@intlify/message-compiler@intlify/core*.prod.js files for productionvue-i18n(.runtime).esm-browser(.prod).js:
<script type="module">)vue-i18n(.runtime).esm-bundler.js:
webpack, rollup and parcelprocess.env.NODE_ENV guards (must be replaced by bundler)@intlify/core-base, @intlify/message-compiler)
esm-bundler builds and will in turn import their dependencies (e.g. @intlify/message-compiler imports @intlify/shared)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)vue-i18n.cjs(.prod).js:
require()target: 'node' and properly externalize vue-i18n, this is the build that will be loadedprocess.env.NODE_ENVThe 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_PROD_DEVTOOLS__ (enable/disable @intlify/devtools support in production, default: false)NOTE:
__INTLIFY_PROD_DEVTOOLS__flag is experimental, and@intlify/devtoolsis WIP yet.
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:
define optionNote: the replacement value must be boolean literals and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.
v9.2.0 (2022-08-01)
We are excited to announce the release of Vue I18n v9.2 !! This release includes many new features, bug fixes, improvements, and document fixes.
We had commited with 35 contributors. Thanks for your contributing ❤️
In the following, we introduce some of the new features:
From Vue I18n v9.2, we have improved TypeScript support. This allows type checking of resources specified in the messages option of createI18n and complementing with APIs such as t.
The following images is the resoureces type-checked:
The following gif image is the API completion working:
For more information on how to setup the system, please read the docs
WebComponents has been supported since Vue 3.2. You can support your Vue Component with Vue I18n as well.
About details, See more the docs
We have released petite-vue-i18n, a small size subset version of Vue I18n, as an experimental feature.
Only minimal functionality is provided in this module. you can reduce your Vue application bundle size with using this module. If you do not need to use all the features of Vue I18n, this module would be a good option.
About details, See more README
We have released a module called vue-i18n-bridge to support Vue 2 applications with Vue I18n v8.x migrate to Vue 3.
vue-i18n-bridge is a module that is mostly compatible with the Vue I18n v9 API. It's an add-on to existing Vue I18n v8.26.1 or later + Vue 2 applications to take advantage of the Composition API provided in Vue I18n v9. This module would be able to support the progressive migration to Vue 3.
About details, See more the docs
globalInjection option As defaultFrom Vue I18n v9.2, the globalInjection option defaults to true. If you localize by global scope using $t in your template, you no longer need to set this option.
useI18n in Legacy API modeWe have supported for useI18n in Legacy API mode. This feature would be useful if you want to migrate from the options API style to the Composition API style in your Vue 3 application.
About details, See more the docs
vue-i18n-bridge module for migration to Vue 3 of course supports Vue 2.7.
Instead of going from Vue 2.6 to Vue 3 directly, you can migrate your Vue applications using Vue I18n with a strategy of Vue 2.6, Vue 2.7, and then Vue 3 progressively.
v-tWe have supported SSR for v-t. If your Vue application uses v-t, you can support SSR without having to be aware in your Vue application.
#974 feat: change globalInjection option default value (@kazupon)
#838 feat: composer type definition extending (experimental feature) (@kazupon)
#811 feat: backport build-in components to vue-i18n-bridge from vue-i18n-next (@kazupon)
#588 feat: petite-vue-i18n (@kazupon)
#478 improvement: target component highlighting on i18n resources inspector (@kazupon)
useI18n on Legacy API mode (@kazupon)d.ts breaking (@kazupon)Stdio for Studio (@FMGordillo)defaultSFCLang and globalSFCScope to sfc (@userquin)FAQs
Internationalization plugin for Vue.js
The npm package vue-i18n receives a total of 985,280 weekly downloads. As such, vue-i18n popularity was classified as popular.
We found that vue-i18n demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.