【vuex-i18n】Vuexで多言語対応をする方法【簡単実装】

多言語化を試してみた

来年の2020年には東京五輪が開幕、また日本の少子化による労働力不足などもあり、今後は日本に多くの外国人がなだれ込んでくると

手順

vuex-i18nのインストール

まずは以下のコマンドで必要なモジュールをインストールしましょう。

yarn add vuex-i18n

yarn add v1.17.3
warning ../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vuex-i18n@1.13.1
info All dependencies
└─ vuex-i18n@1.13.1
✨  Done in 3.79s.

言語別メッセージファイルの用意

次に言語別のメッセージファイルを用意しましょう。

[adsense-responsive]

今回はよくある多言語化と同じように英語(en)と日本語(ja)ごとのjsonファイルを用意して管理してみようと思います。

messages.en.json

{
  "hoge": "fuga"
}

messages.ja.json

{
  "hoge": "ふが"
}

階層化も可能

また、template側でfizz.bazzと言った形式で指定した場合、jsonファイル側では以下の両方でも取得が可能です。

messages.ja.json

// フラット
{
  "lang.ja": "日本語",
  "lang.en": "英語"
}

// 構造
{
  "lang": {
　　　　"ja": "日本語",
　　　　"en": "英語"
　　}
}

出来れば構造化しておいた方がスッキリすると思います♪

storeにデフォルト言語を設定

次はstoreにデフォルトの設定を追加しましょう。

src/store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    lang: "ja"//追加
  },
  mutations: {},
  actions: {}
});

i18.tsの作成

次に以下のファイルを作成してください。

src/i18n.ts

import Vue from "vue";

import vuexI18n from "vuex-i18n";
import store from "./store";

Vue.use(vuexI18n.plugin, store);

const en = require("./messages.en.json");
const ja = require("./messages.ja.json");

Vue.i18n.add("en", en);
Vue.i18n.add("ja", ja);

Vue.i18n.set(store.state.lang);

main.tsで読み込み

次は作成したi18n.tsをmain.tsから読み込んで実行するようにします。

src/main.ts

import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import "./i18n"; // 追加
import "./registerServiceWorker";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

new Vue({
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

template側の実装

では、実際に多言語出力する部分を用意していきましょう。

[adsense-responsive]

App.vue

<template lang="pug">
  #container
    p translate: {{ "hoge" | translate }}
    p $t: {{$t('hoge') }}
...
(略)
...

出力の仕方は2種類あり、translateに引き渡す方法と$tに引き渡す方法です。

storeのlangをenにすると正常に英語に切り替わります。

動的切り替え

では、プルダウンの選択によって動的に切り替えるようにしてみましょう。

App.vue

<template lang="pug">
  v-app
    v-app-bar(app='', color='grey darken-4', dark='')
      div.flex-grow-1
      span {{$store.state.lang}}
      v-menu(right, bottom='')

        template(v-slot:activator="{ on }")
          v-btn(icon,v-on="on")
            i.material-icons language
        v-list
          v-list-item(key="ja",@click.prevent="changeLang('ja')")
            v-list-item-title JA
          v-list-item(key="en",@click.prevent="changeLang('en')")
            v-list-item-title EN
    v-content
      v-row(no-gutters="")
        v-col(cols="4")
          v-card.mx-auto
            v-card-text
              .text--primary
                p translate: {{ "hoge" | translate }}
                p $t: {{$t('hoge') }}

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {}
})
export default class App extends Vue {
  changeLang(lang: string = "") {
    this.$i18n.set(lang);
    this.$store.state.lang = lang;
  }
}
</script>

$i18n.setに渡す事で切り替えが可能です。

確認

実際に動きを確認してみましょう。

正常にシームレスな切り替えが実現出来ましたね♪

終わりに

以上のように、vuex-i18nを使えば、Vuexプロジェクトに多言語化対応を簡単に導入する事が可能になります。

多言語化をお考えの方は是非試してみてください♪