vue-banana-i18n

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

Playground

For Vue 2 use version 1.x. Version 2.x+ only supports Vue 3.x+

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') }}</div>
</div>

import { createApp } from "vue";
import App from "./App.vue";
import {createI18n} 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|അവന്റെ|അവളുടെ}} പ്രൊഫൈൽ പടം മാറ്റി'
  }
}

const app = createApp(App);
const i18nPlugin = createI18n({
  locale: "en",
  messages: messages
});

app.use(i18nPlugin);
app.mount("#app");

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']}"></div>
</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']"></div>
</div>

To set html of the node, use v-i18n.html or v-i18n-html directive just like above.

Example:

  <h2 class='result' v-i18n:search_results.html="[10]"></h2>

Message format

The Banana i18n system and its messages are documented at banana-i18n

License

MIT