投稿日：
2019年10月11日
最終更新日：
【vuex-i18n】Vuexで多言語対応をする方法【簡単実装】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
目次
多言語化を試してみた
来年の2020年には東京五輪が開幕、また日本の少子化による労働力不足などもあり、今後は日本に多くの外国人がなだれ込んでくると
手順
vuex-i18nのインストール
まずは以下のコマンドで必要なモジュールをインストールしましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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.
|
言語別メッセージファイルの用意
次に言語別のメッセージファイルを用意しましょう。
今回はよくある多言語化と同じように英語(en)と日本語(ja)ごとのjsonファイルを用意して管理してみようと思います。
|
1
2
3
|
{
"hoge": "fuga"
}
|
|
1
2
3
|
{
"hoge": "ふが"
}
|
階層化も可能
また、template側でfizz.bazzと言った形式で指定した場合、jsonファイル側では以下の両方でも取得が可能です。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// フラット
{
"lang.ja": "日本語",
"lang.en": "英語"
}
// 構造
{
"lang": {
"ja": "日本語",
"en": "英語"
}
}
|
出来れば構造化しておいた方がスッキリすると思います♪
storeにデフォルト言語を設定
次はstoreにデフォルトの設定を追加しましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
lang: "ja"//追加
},
mutations: {},
actions: {}
});
|
i18.tsの作成
次に以下のファイルを作成してください。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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から読み込んで実行するようにします。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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側の実装
では、実際に多言語出力する部分を用意していきましょう。
|
1
2
3
4
5
6
7
|
<template lang="pug">
#container
p translate: {{ "hoge" | translate }}
p $t: {{$t('hoge') }}
...
(略)
...
|
出力の仕方は2種類あり、translateに引き渡す方法と$tに引き渡す方法です。
storeのlangをenにすると正常に英語に切り替わります。
動的切り替え
では、プルダウンの選択によって動的に切り替えるようにしてみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<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プロジェクトに多言語化対応を簡単に導入する事が可能になります。
多言語化をお考えの方は是非試してみてください♪