Laravelの多言語化(vuex-i18n)でVue.jsのjavaScriptで文字列を取得する方法

Laravelで多言語化した時に、Componentのtemplateで文字列を取得することはできたが、javaScript側で値を取得する方法がわからず、調べたのでメモ。

前提:バージョン等

Laravelのバージョン

$ php artisan --version
Laravel Framework 5.7.22

vuex-i18n

GitHub情報はこちら

https://github.com/dkfbasel/vuex-i18n

やりたかったこと

以下の手順で進めようとしていた

  1. Laravelに多言語化用のvuex-i18nをインストール
  2. vuex-i18n用の文字列を定義
  3. vuex-i18nをLaravel(Vue.js)で使うために設定
  4. Vueのtemplateで文字列を呼び出し
  5. VueのjavaScriptで文字列を呼び出し

この中で、1−4はうまくいったが、5の文字列の取得方法がわからなかった。

最初から、Gitドキュメント見て設定すればよかったが、ネット上にあまり日本語の情報がなくて、英語の情報から、色々と試したらわかった。

実施手順

手順1:Laravelに多言語化用のvuex-i18nをインストール

今回はnpmでインストール

https://www.npmjs.com/package/vuex-i18n

$ npm install vuex-i18n

手順2:vuex-i18n用の文字列を定義

今回は、resource配下にlangフォルダを作って、そこで管理。

こんなフォルダ構成

  • resource
    • lang
      • ja
        • msg.php
      • en
        • msg.php

それぞれの「msg.php」の中身はこんな感じ。

<?php

return [
  'hello' => 'こんにちは'
]

手順3:vuex-i18nをLaravel(Vue.js)で使うために設定

Laravelのresource/js/app.js

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

Vue.use(vuexI18n.plugin, store);

Vue.i18n.add('ja', Locales.ja);
Vue.i18n.add('en', Locales.en);

Vue.i18n.set('ja');

手順4:Vueのtemplateで文字列を呼び出し

templateでの呼び出しは$tを使用

<template>
  <div>
    <span>{{ $t('msg.hello') }}</span>
  </div>
</template>

手順5:VueのjavaScriptで文字列を呼び出し

vueのjavaScriptの呼び出しは、thisの$i18nで取得。

template時の$t がtranslateというメソッド名になっているので、それを使う。

<script>
export default {
  mounted() {
    // 現在のlocaleを取得
   console.log(this.$i18n.locale());
  // -> ja

    // 実際の文字列を取得
    console.log(this.$i18n.translate('msg.hello'));
    // -> こんにちは
  }
}
</script>