Vue banana i18n

A Banana-i18n wrapper to support localization in Vue.js

Version: 1.4.0 Updated: 04/30/2021

By: santhoshtr License: MIT

Downloads Last 30 Days: 224

vue-banana-i18n

GitHub license npm version

A banana-i18n wrapper to support localization in Vue.js

Playground

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-1i8n="'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-1i8n="'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

License

MIT

Categories: Vue js