vue-localez

vue-localez

Vue-localez is an addon to add support for multiple languages.

Installation

Installing Vue Localization is a pretty simple process

Npm install

npm install vue-localez

Yarn install

yarn add vue-localez

Setup

var Vue = require('vue');
var vueLocalez = require('vue-localez');

vueLocalez.requireAll(require.context(`./lang`, true, /\.json$/))

Vue.use(vueLocalez, { // Options
    lang: 'en',         // lang
    extension: 'json',  // language resource
})

Lang Folder

└── lang
    ├── en
    |   ├──error.json
    |   └──messages.json
    ├── id
    |   ├──error.json
    |   └──messages.json
    └── fr
        ├──error.json
        └──messages.json

Lang file

lang/id/messages.json

{
  "greeting": "Halo {name}"
}

lang/en/messages.json

{
  "greeting": "Hello {name}"
}

lang/fr/messages.json

{
  "greeting": "Bonjour {name}"
}

Usage

$locale.message('message.greeting', { name : "Waldi Irawan" })

// returns
// id -> Halo Waldi Irawan
// en -> Hello Waldi Irawan
// fr -> Bonjour Waldi Irawan

yourcomponent.vue

<h1>{{ $locale.message('message.greeting', { name : "Waldi Irawan" }) }}</h1>

Results :

<!-- id -->
<h1>Halo Waldi Irawan</h1>
<!-- en -->
<h1>Halo Waldi Irawan</h1>
<!-- fr -->
<h1>Halo Waldi Irawan</h1>

Change localez

// inside vue instance
this.$locale.for('id') // 'id' is iso code country