タグ: vue-i18n

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

ja.json

{
    "こんにちは" : "こんにちは",
    "ありがとう" : "ありがとう",
    "さようなら" : "さようなら"
}

en.json

{
    "こんにちは" : "Hello",
    "ありがとう" : "Thank you",
    "さようなら" : "Good bye"
}

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

index.blade.php

<span>
    {{ __("こんにちは") }}
</span>

<span>
    @lang("ありがとう")
</span>

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

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

npm install vue-i18n

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

main.js

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

<template>
<div id="main-component">
    <span>
        {{ $t("さようなら") }}
    </span>
</div>
</template>

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

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

ja.json

{
    "果物一覧" : {
        "りんご" : "りんご",
        "みかん" : "みかん",
        "バナナ" : "バナナ"
    }
}

en.json

{
    "果物一覧" : {
        "りんご" : "apple",
        "みかん" : "orange",
        "バナナ" : "banana"
    }
}

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

index.blade.php

<script>
    var fruits_list = JSON.parse('{!! json_encode((__("果物一覧"))) !!}');
</script>

<main-component></main-component>

main.js

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

<template>
<div id="main-component">
    <span v-for="fluit in fruits_list">
        {{ fluit }}
    </span>
</div>
</template>

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

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