0.0.3 • Published 7 years ago
vue-localez v0.0.3
vue-localez
Vue-localez is an addon to add support for multiple languages.
Features
- Has support for Intl
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