Vue I18nで多言語対応する

以前 Laravel での多言語対応を紹介しましたが、フロントエンドを Blade テンプレートから Vue に変えたため Vue で多言語対応を行う必要がでてきました。

Vue で多言語対応するには最もポピュラーであろう Vue I18n を使って多言語化します。

Vue I18n

Vue I18n を使う

今回は Laravel Mix を使っているため、npm から追加します。yarn 派なのでコマンドは yarn で。

yarn add vue-i18n

使うには以下のように追記します。

/* 省略 */
import VueI18n from "vue-i18n";
Vue.use(VueI18n);

const locale = (
    window.navigator.userLanguage ||
    window.navigator.language ||
    window.navigator.browserLanguage
).substr(0, 2);

import messages from "@/locales/messages";

const i18n = new VueI18n({
  locale,
messages,
})

new Vue({
  i18n,
}

locale については一旦飛ばし、massages についてですが Vue の初期設定とファイルを分けています。

基本的には json を読み出すのですが、Laravel Mix で json-loader をうまく使えなかったので、JavaScirpt で Object 型をエクスポートして使います。

const messages = {
  ja: {
    hello: "こんにちは"
  },
  en: {
    hello: "hello"
  }
};

export default messages;

あとは Vue のコンポーネント内で$t('hello')と呼び出すと、Vue I18n の設定が ja ならば「こんにちは」を、en であれば「hello」と出力されます。

ここで一旦飛ばした locale についてですが、ブラウザの言語設定から初期で何の言語を使うかを判断しています。

問題点として Chrome や IE、Firefox などブラウザによって JavaScript での呼び出し方が異なり、また結果としてjaではなくja-JPと返ってくることもあります。

そのため substr を使って最初の 2 文字だけを取り出して判別しています。

サイト内で言語の表示をユーザの任意で変更したい場合は、変更できるようなボタンを用意することで可能です。

<template>
/* 省略 */
 <a href @click.prevent="changeLanguage('ja')">日本語</a>
 <a href @click.prevent="changeLanguage('en')">English</a>
/* 省略 */
</template>

<script>
/* 省略 */
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  },
/* 省略 */
</script>

p { margin-bottom: 1em; } blockquote p { margin-bottom: initial; } #content ul { padding-left: 40px; } .token.operator { background-color: initial; }