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 of Vue.js
1.0.0+2.0.0-beta.1+jsdelivr
<script src="https://cdn.jsdelivr.net/vue.i18n/4.2.1/vue-i18n.min.js"></script>
$ npm install vue-i18n
$ git clone https://github.com/kazupon/vue-i18n node_modules/vue-i18n
$ cd node_modules/vue-i18n
$ npm install
$ npm run build
When used in CommonJS, you must explicitly install the router via Vue.use():
:warning: if you are using
vue-router, you must install withVue.use()in advance of instance methods (router#map,router#start, ...etc).
var Vue = require('vue')
var VueI18n = require('vue-i18n')
Vue.use(VueI18n)
Vue.config.lang = 'ja'
Vue.locale('ja', { ... })
You don't need to do this when using the standalone build, as it installs itself automatically.
var Vue = require('vue')
var VueI18n = require('vue-i18n')
// ready translated locales
var locales = {
en: {
message: {
hello: 'hello world'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
// install plugin
Vue.use(VueI18n)
// set lang
Vue.config.lang = 'ja'
// set locales
Object.keys(locales).forEach(function (lang) {
Vue.locale(lang, locales[lang])
})
// create instance
new Vue({ el: 'body' })
Template the following:
<p>{{ $t("message.hello") }}</p>
Output the following:
<p>こんにちは、世界</p>
In some cases you might want to rendered your translation as an HTML message and not a static string.
var locales = {
en: {
message: {
hello: 'hello <br> world'
}
}
}
Template the following (notice the tripple brackets):
<p>{{{ $t('message.hello') }}}</p>
Output the following (instead of the message pre formatted)
<p>hello
<!--<br> exists but is rendered as html and not a string-->
world</p>
Locale the following:
var locales = {
en: {
message: {
hello: '{msg} world'
}
}
}
Template the following:
<p>{{ $t('message.hello', { msg: "hello"}) }}</p>
Output the following:
<p>hello world</p>
Locale the following:
var locales = {
en: {
message: {
hello: '{0} world'
}
}
}
Template the following:
<p>{{ $t('message.hello', ["hello"]) }}</p>
Output the following:
<p>hello world</p>
Locale the following:
var locales = {
en: {
message: {
hello: '%{msg} world'
}
}
}
Template the following:
<p>{{ $t('message.hello', { msg: "hello"}) }}</p>
Output the following:
<p>hello world</p>
Locale the following:
var locales = {
en: {
message: 'hello world'
},
ja: {
}
}
Vue.config.lang = 'ja'
Template the following:
<p>{{ $t('message') }}</p>
Output the following:
<p>hello world</p>
You can translate component based.
The below locale setting example:
var locales = {
en: {
message: {
hello: 'hello world'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
Vue.config.lang = 'ja'
Object.keys(locales).forEach(function (lang) {
Vue.locale(lang, locales[lang])
})
new Vue({
el: '#app',
components: {
component1: {
template: '<p>component1 local: {{ $t("hello") }}</p>'
+ '<p>component1 global: {{ $t("message.hello") }}</p>',
locales: {
en: { hello: 'hello component1' },
ja: { hello: 'こんにちは、component1' }
}
}
}
})
Template the following:
<div id="app">
<p>{{ $t("message.hello") }}</p>
<component1></component1>
</div>
Output the following:
<div id="app">
<p>こんにちは、世界</p>
<p>component1 local: こんにちは、component1</p>
<p>component1 global: こんにちは、世界</p>
</div>
:pencil: If you set the locale of same keypath as global locale (
Vue.locale()), in its component,$tis translate with component locale.
Sometimes, you need to set dynamically the locale from external location. You can set dynamically it with Vue.locale.
the below the example:
var self = this
var lang = 'ja'
Vue.locale(lang, function () {
self.loading = true
return fetch('/locale/' + lang, {
method: 'get',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
}).then(function (res) {
return res.json()
}).then(function (json) {
self.loading = false
if (Object.keys(json).length === 0) {
return Promise.reject(new Error('locale empty !!'))
} else {
return Promise.resolve(json)
}
}).catch(function (error) {
self.error = error.message
return Promise.reject()
})
}, function () {
Vue.config.lang = lang
})
In dynamic locales, You can use the two type interfaces:
You need to implement locale setting that return function have function (resolve, reject) like promise (future). The following, those argument of the function, if successful, you need to use the resolve according to locale object. if failed, you need to use reject
resolverejectAs mentioned above, You need to implement locale setting that return a promise. if successful, you need to resolve according to locale object. if failed, you need to use reject.
:warning: You must return a ES6 compatible promise.
Type: String
Default: en
Usage:
Get or set a translation language code. Default by en string value.
Vue.config.lang = 'ja'
Type: String
Default: en
Usage:
Get or set a translation fallback language code. Default by en string value.
Vue.config.fallbackLang = 'ja'
Arguments:
{String} lang{Object | Function} [locale]{Function} [cb]Return:
Usage:
Register or retrieve a locale
// register locale with object
Vue.locale('en', { message: 'hello' })
// register with external locale
Vue.locale('ja', function () {
return fetch('/locales/ja', {
method: 'get',
// ...
}).then(function (json) {
return Promise.resolve(json)
}).catch(function (error) {
return Promise.reject()
})
}, function () {
Vue.config.lang = 'ja'
})
Arguments:
{String} keypath{String} [lang]{Array | Object [arguments]Return: Translated string
Usage:
This is the same as the $t method. This is translate function for global locale only. more detail see $t
Type: Object
Details:
A locale definition object to be made available to the Vue instance only.
See also:
Arguments:
{String} keypath{String} [lang]{Array | Object [arguments]Return: Translated string
Usage:
Translate the locale of keypath. Translate in preferentially component locale than global locale. If not specified component locale, translate with global locale. If you specified lang, translate the locale of lang. If you specified keypath of list / named formatting local, you must specify arguments too. For arguments more details see Formatting.
dev: git branch my-new-topic origin/devgit commit -am 'Add some topic'git push origin my-new-topicdev branch of kazupon/vue-i18n repository !# 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
Details changes for each release are documented in the CHANGELOG.md.
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.