素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

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

投稿日:

スポンサーリンク

336×280




多言語化を試してみた

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

手順

vuex-i18nのインストール

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

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

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

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

階層化も可能

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

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

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

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

i18.tsの作成

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

main.tsで読み込み

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

template側の実装

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

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

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

動的切り替え

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

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

確認

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

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

本日のオススメ商品

終わりに

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

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

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , ,

blogenist

Author: blogenist