vue-i18n は Vue.js 向けの国際化(多言語化)プラグインです。
今回アプリのアップデート版を作るにあたり、Monaca の Onsen UI + Vue プロジェクトで vue-i18n を使ってみました。
以下に備忘録を兼ねた使用例を記します。
インストール
npm install vue-i18nファイル構成
- 対応する言語は日本語、英語、韓国語、中国語(簡体)、中国語(繁体)、スペイン語です。それぞれ JSON ファイルに分けて記述します。
- i18n.js では vue-i18n のインスタンスを作成します。
- main.js では Vue 本体のインスタンスを作成しています。そこに i18n.js で作成した vue-i18n のインスタンスを追加します。

以下、ファイルごとに説明します。
言語ファイル
日本語用の言語ファイル ja.json の一部を以下に記します。
{ "cancel": "キャンセル", "set": "設定", "del": "削除", "sound": { "title": "通知音", "type": [ "バイブレーション", "鐘(1)", "鐘(2)", "鐘(3)", "お鈴" ] }, ..... "background": { "title": "背景", "type": [ "森林", "蓮の花", "空", "星" ] }, ..... }
i18n.js
Vue と vue-i18n プラグインをインポートします。
import Vue from 'vue'; import VueI18n from 'vue-i18n';
ブラウザの言語バージョン(window.navigator.language)からアプリで使用する言語ファイルを決定し、require() で読み込みます。
let locale = "en", message = {}; // default: "en" const language = window.navigator.language; if (language) { const lang = language.toLowerCase().split("-"); switch (lang[0]) { case "ja": // 日本語: ja, ja-JP case "es": // スペイン語: es, es-* case "ko": // 韓国語 case "zhcn": // 中国語 (簡体) case "zhtw": // 中国語 (繁体) locale = lang[0]; break; case "zh": // 中国語: zh-* switch (lang[1]) { case "cn": // 中国 case "sg": // シンガポール case "hans": locale = "zhcn"; // 中国語 (簡体) break; case "tw": // 台湾 case "hk": // 香港 case "mo": // マカオ case "hant": locale = "zhtw"; // 中国語 (繁体) break; } break; } } message[locale] = require(`./assets/i18n/${locale}.json`)
vue-i18n のインストールおよびインスタンスの作成を行います。作成したインスタンスはエクスポートしておきます。
Vue.use(VueI18n); export const i18n = new VueI18n({ locale, messages: message // 必要な言語ファイルのみ設定する });
main.js
Vue と i18n.js からエクスポートされた vue-i18n インスタンスをインポートします。
import Vue from 'vue'; import { i18n } from './i18n.js'
Vue インスタンスを作成します。このとき Vue のオプションオブジェクトとして vue-i18n インスタンスを渡します。
new Vue({ el: '#app', i18n, template: '<app></app>', components: { App }, ..... });
Vue ファイル
テンプレートに直接 $t() メソッドを記述することができます。
<v-ons-list-header>{{ $t('sound.title') }}</v-ons-list-header>
<v-ons-list-item v-for="(soundType, $index) in $t('sound.type')" :key="soundType" tappable > <label class="left"> <v-ons-radio :input-id="'radio-sound-' + $index" :value="$index" v-model="tmp_soundType" @click="clickedSoundType($index)" > </v-ons-radio> </label> <label :for="'radio-sound-' + $index" class="center" >{{ soundType }}</label> </v-ons-list-item>
$t() メソッドはスクリプトでも使うことができます。
const a = this.$t('background.type') console.log(a) // ["森林","蓮の花","空","星"]
これを応用して算出プロパティで使ってみました。this.state.backgroundType(文字列の0から3)の値に対応する文字が表示されます。
<div>{{ image }}</div>
computed: { image () { return this.$t(`background.type[${Number(this.state.backgroundType)}]`) } }
また、vue-i18n のインスタンス作成時に設定した locale にアクセスすることができます。
onHelp () { window.open('http://senmyou.xyz/app/mnote/mnote_help_' + this.$i18n.locale, '_system'); }, onPrivacy () { if (this.$i18n.locale === "ja") { window.open('http://senmyou.xyz/app/mnote_privacy_ja', '_system'); } else { window.open('http://senmyou.xyz/app/mnote_privacy_en', '_system'); } }