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

やりたかったこと

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

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

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

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

実施手順

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

今回はnpmでインストール

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

$ npm install vuex-i18n

手順２：vuex-i18n用の文字列を定義

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

こんなフォルダ構成

resource
- lang
  - ja
    - msg.php
  - en
    - msg.php

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

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

手順３：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');

手順４：Vueのtemplateで文字列を呼び出し

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

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

手順５：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>