vue-lang
v0.2.5
Published
Vue.js i18n language integration
Downloads
1,148
Maintainers
Readme
vue-lang
Installation
$ npm install vue-lang --save
Setup
var Vue = require('vue');
var Lang = require('vue-lang');
var locales = {
"en": require("./locale/en.json"),
"nl": require("./locale/nl.json")
}
Vue.use(Lang, {lang: 'en', locales: locales})
Where en.json
is defined as:
{
"hello": "World",
"messages": "You have {0} {1} messages",
}
For Webpack, either install JSON Loader or use .js
files instead of .json
and format as follows:
mudule.exports = {
"hello": "World",
"messages": "You have {0} {1} messages",
}
Usage
Language output
<p>Hello {{$lang.hello}}</p>
<p>{{$lang.messages | replace countmsg "new"}}</p>
With:
{
"data": {
"countmsg": 5
}
}
Results in:
<p>Hello World</p>
<p>You have 5 new messages</p>
Change Language (reactive)
Vue.$setLang("nl")
this.$setLang("nl")
Available Languages
<ul>
<li v-for="lang in $langs" @click="$setLang(lang)">{{lang}}</li>
</ul>
Parse Path (Reactive) (TODO)
<p>Hello {{$l('cities.amsterdam'}}</p>
Credits
@Haixing-Hu & @kazupon for inspiration