今回は、LaravelとVue.jsを用いたプロジェクトで多言語対応を行うやり方を紹介します。
まず、resources/langに対応する言語のjsonファイルを置きます。とりあえず、日本語と英語を想定してja.json,en.jsonとします。
ja.json
|
1 2 3 4 5 |
{ "こんにちは" : "こんにちは", "ありがとう" : "ありがとう", "さようなら" : "さようなら" } |
en.json
|
1 2 3 4 5 |
{ "こんにちは" : "Hello", "ありがとう" : "Thank you", "さようなら" : "Good bye" } |
次に、Laravelのbladeで表示する方法です。
index.blade.php
|
1 2 3 4 5 6 7 |
<span> {{ __("こんにちは") }} </span> <span> @lang("ありがとう") </span> |
1つ目の方法は__ヘルパ関数を使用する方法です。翻訳文字列のキーを翻訳したものに変換するヘルパ関数です（Laravel標準のヘルパ関数なのでbladeだけでなく、モデルやコントローラでも使えます）。これで変換した文字列をMustache記法でechoします。
もう1つの方法はbladeの@langディレクティブを用いる方法です。このように2通りの書き方ができますが、どちらかに統一したほうがわかりやすいかもです。
次に、Vue.jsでの多言語対応の方法です。
vue-i18nというVue.jsのプラグインを使います。vue-i18nについての詳しい説明はこことかここを読んで下さい。
まず、
|
1 |
npm install vue-i18n |
でvue-i18nをインストールします。
次に、こんな感じでvue-i18nをjs側で読み込みます。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
window.Vue = require('vue'); import VueI18n from 'vue-i18n'; Vue.use(VueI18n); // 言語の設定 Vue.use(VueI18n); const i18n = new VueI18n({ locale: locale, messages: { ja : require('../../lang/ja.json'), en : require('../../lang/en.json') } }); import MainComponent from './components/MainComponent.vue'; const app = new Vue({ i18n: i18n, components: { MainComponent } }); |
MainComponent.vue
|
1 2 3 4 5 6 7 |
<template> <div id="main-component"> <span> {{ $t("さようなら") }} </span> </div> </template> |
これで、Vue.jsで多言語表示ができるようになります。
ただ、1つ問題がありまして、vue-i18nでは第一階層のデータしか読み込めないので、
ja.json
|
1 2 3 4 5 6 7 |
{ "果物一覧" : { "りんご" : "りんご", "みかん" : "みかん", "バナナ" : "バナナ" } } |
en.json
|
1 2 3 4 5 6 7 |
{ "果物一覧" : { "りんご" : "apple", "みかん" : "orange", "バナナ" : "banana" } } |
のようなデータがこのままでは読み込むことが出来ないのです。
その場合は以下のように一旦blade側で加工してからコンポーネントに渡します。
index.blade.php
|
1 2 3 4 5 |
<script> var fruits_list = JSON.parse('{!! json_encode((__("果物一覧"))) !!}'); </script> <main-component></main-component> |
main.js
|
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 |
window.Vue = require('vue'); import VueI18n from 'vue-i18n'; Vue.use(VueI18n); // 言語の設定 Vue.use(VueI18n); const i18n = new VueI18n({ locale: locale, messages: { ja : require('../../lang/ja.json'), en : require('../../lang/en.json') } }); import MainComponent from './components/MainComponent.vue'; const app = new Vue({ i18n: i18n, components: { MainComponent }, data: function() { return { fruits_list : fruits_list } } }); |
MainComponent.vue
|
1 2 3 4 5 6 7 |
<template> <div id="main-component"> <span v-for="fluit in fruits_list"> {{ fluit }} </span> </div> </template> |
自分はこんな感じのやり方でやりました（もしかしたらもっといいやり方もあるかもしれないので、他にいいやり方があれば教えていただければと思います）。
また、今回は言語切替機能については触れませんでしたが。そのあたりについてはこちらが参考になりました。