【Vue.js】vue-i18n を使用した国際化（多言語）対応

Vue で作った既存の Web アプリケーションを国際化（多言語）対応していきます。

vue-i18n というライブラリを使用します。
GitHub - kazupon/vue-i18n: Internationalization plugin for Vue.js Vue I18n

国際化対応するアプリケーションは、すでに公開している Gyakutter というツイッタークライアントです。
yyama694.github.io

user_name パラメータを付与してアクセスすると、ページが開くと同時にユーザのツイートを取得します。
https://yyama694.github.io/gyakutter/?user_name=takapon_jp 　← 特に意味はないけどホリエモンw

各ツールのバージョンは次の通りです。

D:\>node --version
v10.16.3

D:\>npm --version
6.9.0

D:\>vue --version
3.11.0

install

npm を使って vue-i18n をインストールします。

npm install vue-i18n

メッセージを集めた json ファイルの作成

メッセージを集めた json ファイルを用意します。

messages.json

{
  "en":{
    "message": {
      "app_description": "No login required! Twitter client that displays tweets in chronological order.",
      "explanation": "Enter user name and press the Search button.",
      "get_older_tweet": "Get older tweets",
      "search_this_user": "Search for this user"
    }
  },
  "ja": {
    "message": {
      "app_description": "ログイン不要！ 時系列昇順で ツィート を表示する Twitter クライアントです。",
      "explanation": "ユーザ名を指定して Search ボタンを押してください。",
      "get_older_tweet": "さらに古いツイートを取得する",
      "search_this_user": "このユーザを検索"
    }
  }
}

vue-i18n をインポートする。

new Vue している js の箇所で、以下のコードを追加します。Gyakutter の場合は main.js でした。

import VueI18n from 'vue-i18n'  // 追加
・
（略）
・
Vue.use(VueI18n); // 追加
const i18n = new VueI18n({ // 追加
  locale: navigator.language.split('-')[0], // 追加
  fallbackLocale: 'ja', // 追加
  messages // 追加
}); // 追加
new Vue({
  render: h => h(App),
  i18n // 追加
}).$mount("#app");

「// 追加」と書いてある行を追加しました。

「navigator.language.split('-')[0],」の箇所ですが、ブラウザから送られてきた言語の「en-US」などを「en」に変換するために行っています。

ハードコードされていた文字列を messages.json のキーに書き換える。

では実際にテンプレートに直に記載されている文字列を message.json で指定したキーで書き換えたいと思います。
例としてタイトル下の説明文をキーに書き換えます。

修正前

<template>
  <div class="hero is-primary hero-body">
    <div class="container">
      <h1 class="title">
        Gyakutter
      </h1>
      <h2 class="subtitle">
        ログイン不要！ 時系列昇順で ツィート を表示する Twitter クライアントです。
      </h2>
    </div>
  </div>
</template>

修正後

<template>
  <div class="hero is-primary hero-body">
    <div class="container">
      <h1 class="title">
        Gyakutter
      </h1>
      <h2 class="subtitle">
        {{ $t("message.app_description") }}
      </h2>
    </div>
  </div>
</template>