vue-i18n を使ってみました

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');
  }
}