Skip to content

kvdmolen/vue-lang

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-lang for Vue 2.x

Installation

$ npm install vue-lang --save

Setup

import Vue from 'vue'
import Lang from 'vue-lang'

const locales = {
  'en': require('./langs/en.json'),
  'br': require('./langs/br.json'),
  'nl': require('./langs/nl.json')
}

Vue.use(Lang, {lang: 'en', locales: locales})

Where en.json is defined as:

{
  "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

About

Vue.js i18n language integration

Resources

License

Stars

Watchers

Forks

Packages

No packages published