Package Exports
- vue-i18n
- vue-i18n/dist/vue-i18n.common
- vue-i18n/src/extend
- vue-i18n/src/index
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-i18n) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vue-i18n
Internationalization plugin of Vue.js
Compatibility
- Vue.js
1.0.0
+
Installation
npm
$ npm install vue-i18n
When used in CommonJS, you must explicitly install the router via Vue.use():
var Vue = require('vue')
var VueI18n = require('vue-i18n')
Vue.use(VueI18n)
Vue.config.lang = 'ja'
Vue.locale('ja', { ... })
Usage
var Vue = require('vue')
var VueI18n = require('vue-i18n')
// ready translated locales
var locales = {
en: {
message: {
hello: 'hello world'
}
},
ja: {
message: {
hello: 'こんにちは、世界'
}
}
}
// install plugin
// DEPRECATED:
// `options` arguments, please use `Vue.config.lang` and `Vue.locale`.
// 3.1 or later, not used `options` arguments!!
Vue.use(VueI18n/*, {
lang: 'ja',
locales: locales
}*/)
// set lang
// RECOMMEND: 3.0 or later
Vue.config.lang = 'ja'
// set locales
// RECOMMEND: 3.0 or later
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>
Formatting
HTML formatting
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>
Named formatting
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>
List formatting
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>
Support ruby on rails i18n format
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>
Dynamic 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
})
Dynamic locale interfaces
In dynamic locales, You can use the two type interfaces:
1. function
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
- successful:
resolve
- failed:
reject
2. promise
As 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
.
API References
Global Config
lang
Type:
String
Default:
en
Usage:
Get or set a translation language code. Default by
en
string value.Vue.config.lang = 'ja'
Global Methods
Vue.locale ( lang, [locale], [cb] )
Arguments:
{String} lang
{Object | Function} [locale]
{Function} [cb]
Return:
- locale function or object
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' })
Vue.t( keypath, [lang], [arguments] )
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. more detail see $t
Instance Methods
$t(keypath, [lang], [arguments])
Arguments:
{String} keypath
{String} [lang]
{Array | Object [arguments]
Return: Translated string
Usage: Translate the locale of
keypath
. If you specifiedlang
, translate the locale oflang
. If you specifiedkeypath
of list / named formatting local, you must specifyarguments
too. Forarguments
more details see Formatting.
Options
NOTE: Deprecated in 3.1 or later ⚠️
Plugin options
Vue.use(plugin, {
lang: 'en',
locales: {
en: {
...
},
...
ja: {
...
}
}
})
lang
Specify translate the language code.
If you abbreviated the lang
option, translate as well as 'en' language code option (default: 'en').
locales
Specify translate some local dictionary.
If you abbreviated the locales
option, set the empty local dictionary.
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 ofkazupon/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.