vue-lang

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