Internationalization plugin of Vue.js
- works with Vue.js
0.12.0
+
$ 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, { ... })
var Vue = require('vue')
var i18n = require('vue-i18n')
// ready translated locales
var locales = {
en: {
message: {
hello: 'the world'
}
},
ja: {
message: {
hello: 'ザ・ワールド'
}
}
}
// set plugin
Vue.use(i18n, {
lang: 'ja',
locales: locales
})
// create instance
new Vue({
el: '#test-i18n'
})
Template the following:
<div id="test-i18n" class="message">
<p>{{ $t("message.hello") }}</p>
</div>
Output the following:
<div id="test-i18n" class="message">
<p>ザ・ワールド</p>
</div>
Locale the following:
var locales = {
en: {
message: {
hello: '{msg} world'
}
}
}
Template the following:
<div class="message">
<p>{{ $t('message.hello', { msg: "hello"}) }}</p>
</div>
Output the following:
<div class="message">
<p>hello world</p>
</div>
Locale the following:
var locales = {
en: {
message: {
hello: '{0} world'
}
}
}
Template the following:
<div class="message">
<p>{{ $t('message.hello', ["hello"]) }}</p>
</div>
Output the following:
<div class="message">
<p>hello world</p>
</div>
- keypath:
String
required - lang:
String
optional - arguments:
Array | Object
optional
Translate the locale of keypath
. 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.
Vue.use(plugin, {
lang: 'en',
locales: {
en: {
...
},
...
ja: {
...
}
}
})
Specify translate the language code.
If you abbreviated the lang
option, translate as well as 'en' language code option (default: 'en').
Specify translate some local dictionary.
If you abbreviated the locales
option, set the empty local dictionary.
Get or set a global translation language code. Default by en
string value. You can change the language of the global level dynamic translation in your application.
When specified with lang
plugins option at Vue.use
, Vue.config.lang
is set that value.
- 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 !
$ make test