Vueで始めるi18n対応

はじめに

Vueを用いてサイトを作っていると、多言語対応が必要となるシーンや多言語対応をやりたくなってしまうことがよくあります。

そんなときに使える手法を備忘録として残しておきます。

実装方法

vue.jsアプリケーションを多言語対応する上で最もよく使われているであろうvue-i18nというパッケージを用いて進めていきます。

vue-i18nの導入

公式のガイドに従ってパッケージを追加します。

npm install vue-i18n

言語別のjsonを用意する

切り替えたい言語に応じた言語別のjsonファイルを用意します。

まず./src配下にi18nディレクトリを作成して、

mkdir ./src/i18n

言語別にjsonファイルを作成します。

./src/i18n/ja.json

{
  "message": {
    "hello": "こんにちは"
  }
}

./src/i18n/en.json

{
  "message": {
    "hello": "Hello"
  }
}

中身はこんな感じで大丈夫。

i18n.tsの追加

./src/i18n.ts

import { createI18n } from "vue-i18n";

import i18n-ja from "./i18n/ja";
import i18n-en from "./i18n/en";

const userLocale = navigator.language || navigator.userLanguage;

const i18n = createI18n({
  legacy: false,
  // デフォルトの言語を日本語に固定する
  locale: userLocale.includes('ja') ? 'ja' : 'en',
  // 言語の定義
  messages: {
    ja: i18n-ja,
    en: i18n-en,
  },
});

export default i18n;

通常であれば、UAをみて言語をよしなに表示してあげますが、この例では日本語と英語しかデータを定義していないため、日本語でなければ問答無用で英語を表示する仕様になっています。
必要に応じて追加してください。

main.tsを書き換え

./src/main.ts

import { createApp } from "vue";

import App from "./App.vue";
import i18n from "./i18n";

createApp(App).use(i18n).mount("#app");

i18n.tsを読み込み、Vueに渡してあげます。

コンポーネント内での使用方法

./src/components/HelloWorld.vue

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('ja')">日本語</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
};
</script>

この例では、$tメソッドを利用し、テキストを描画し、ボタンの押下に応じて言語を切り替える簡単なものになっています。

実際に何かしらのページに組み込む際には、言語切替のトリガーをヘッダーに仕込んであげるといい感じになります。

また、複数ページにわたって言語切り替えを行いたい場合や、ユーザーの選択した言語を保存して再訪問時に反映させたい場合は、VuexやLocalStorageを活用すると良いでしょう。

さいごに

vue-i18nを用いると比較的簡単に多言語対応を実装できるので是非試してみてください。

この記事が誰かの参考になれば幸いです。