LaravelとVue.jsで多言語対応を行う

今回は、LaravelとVue.jsを用いたプロジェクトで多言語対応を行うやり方を紹介します。
まず、resources/langに対応する言語のjsonファイルを置きます。とりあえず、日本語と英語を想定してja.json,en.jsonとします。

ja.json

en.json

次に、Laravelのbladeで表示する方法です。

index.blade.php

1つ目の方法は__ヘルパ関数を使用する方法です。翻訳文字列のキーを翻訳したものに変換するヘルパ関数です(Laravel標準のヘルパ関数なのでbladeだけでなく、モデルやコントローラでも使えます)。これで変換した文字列をMustache記法でechoします。
もう1つの方法はbladeの@langディレクティブを用いる方法です。このように2通りの書き方ができますが、どちらかに統一したほうがわかりやすいかもです。

次に、Vue.jsでの多言語対応の方法です。
vue-i18nというVue.jsのプラグインを使います。vue-i18nについての詳しい説明はこことかここを読んで下さい。
まず、

でvue-i18nをインストールします。
次に、こんな感じでvue-i18nをjs側で読み込みます。

main.js

MainComponent.vue

これで、Vue.jsで多言語表示ができるようになります。

ただ、1つ問題がありまして、vue-i18nでは第一階層のデータしか読み込めないので、

ja.json

en.json

のようなデータがこのままでは読み込むことが出来ないのです。
その場合は以下のように一旦blade側で加工してからコンポーネントに渡します。

index.blade.php

main.js

MainComponent.vue

自分はこんな感じのやり方でやりました(もしかしたらもっといいやり方もあるかもしれないので、他にいいやり方があれば教えていただければと思います)。

また、今回は言語切替機能については触れませんでしたが。そのあたりについてはこちらが参考になりました。