A banana-i18n wrapper to support localization in Vue.js
vue-banana-i18n
A banana-i18n wrapper to support localization in Vue.js
Installation
npm install vue-banana-i18n
then
import i18n from 'vue-banana-i18n'
Basic Usage
<div id="app">
<h1>{{ $i18n('hello_world') }}</h1>
<h2 class='result'>{{ $i18n('search_results', 10) }}</h2>
<div class='status'>{{ $i18n('profile_change_message', 'Alice', 'female') }}</h2>
</div>
import Vue from 'vue'
import i18n from 'vue-banana-i18n'
const messages = {
en: {
'hello_world': 'Hello world',
'search_results': 'Found $1 {{PLURAL:$1|result|results}}',
'profile_change_message': '$1 changed {{GENDER:$2|his|her}} profile picture'
},
ml: {
'hello_world': 'എല്ലാവർക്കും നമസ്കാരം',
'search_results': '{{PLURAL:$1|$1 ഫലം|$1 ഫലങ്ങൾ|1=ഒരു ഫലം}} കണ്ടെത്തി',
'profile_change_message': '$1 {{GENDER:$2|അവന്റെ|അവളുടെ}} പ്രൊഫൈൽ പടം മാറ്റി'
}
}
Vue.use(i18n, {
locale:'es',
messages:messages
})
Directive
The v-i18n directive as illustrated in below example is also useful. It sets the text for the node. HTML values if any, will be escaped.
<div id="app">
<h1 v-i18n="'hello_world'"></h1>
<h2 class='result' v-i18n="{msg: 'search_results', params:[10]}"></h2>
<div class='status' v-i18n="{msg: 'profile_change_message', params:['Alice', 'female']}"></h2>
</div>
Alternative syntax:
<div id="app">
<h1 v-i18n="'hello_world'"></h1>
<h2 class='result' v-i18n:search_results="[10]"></h2>
<div class='status' v-i18n:profile_change_message="['Alice', 'female']"></h2>
</div>
To set html of the node, use v-i18n-html directive just like above.
Message format
The Banana i18n system and its messages are documented at banana-i18n