Laravel + Vue(Vuex)の多言語対応

Laravel + Vue の構成で、i18n対応をしたい時、Vue側とLaravel側両方で管理するのは大変なため、一つにまとめたくなります。
基本的にLaravel側でlocaleファイルを作成管理して、同じものをVue用に生成するという流れで運用していこうと思います。

環境

• Laravel5.6
• Vue2.5.7

Laravel側

1. laravel-vue-i18n-generatorをインストール。

$ composer require martinlindhe/laravel-vue-i18n-generator

1. configファイル生成。

$ php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"

1. localeファイルをresources/lang/ja に作る。

2. config/vue-i18n-generator.php をvuex-i18n用に編集。

- 'i18nLib' => 'vue-i18n',
+ 'i18nLib' => 'vuex-i18n',

1. vuex-i18nで使うjsファイルをlaravelのlocaleファイルから生成。

$ php artisan vue-i18n:generate

Vue側

1. vuex, vuex-i18nがなければインストール。

$ yarn add vuex vuex-i18n

1. Vueのエントリファイル(resources/assets/js/app.js)を編集。

.
.

import Vue from 'vue';
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated';

Vue.use(Vuex);
const store = new Vuex.Store();
Vue.use(vuexI18n.plugin, store);

// resources/lang で用意したlocaleファイルを追加
Vue.i18n.add('ja', Locales.ja);
Vue.i18n.add('en', Locales.en);

// デフォルトlocaleを設定
Vue.i18n.set('ja');

.
.
.


const app = new Vue({
  store,
  el: '#app'
});

使い方

例えばlocaleファイルvalidation.phpに

return [
.
.
  'date' => ':attributeは、正しい日付ではありません。',
.
.
]

のようなものがあれば、

Laravel(Bladeテンプレート)では、

@lang('validation.date', ['attribute' => '誕生日'])

Vueでは、

{{ $t('validation.date', {attribute: '誕生日'}) }}

と書け、 誕生日は、正しい日付ではありません。 と表示されます。

これでLaravelとVueのlocaleファイルを一箇所で管理することできるようになりました。