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": [
"バイブレーション",
"鐘（１）",
"鐘（２）",
"鐘（３）",
"お鈴"
]
},
.....
"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（文字列の０から３）の値に対応する文字が表示されます。
<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');
}
}
