Vue+Symfonyでsymfonyのtrans機能を使用する。

使用するもの

• Vue2.x
• symfony
• vue-i18n

 １．Vue.jsのi18nプラグイン

 https://github.com/kazupon/vue-i18n

i18nプラグインの導入方法は割愛します。

２．Symfonyのtrans情報を取得

    /**
     * トランスレーション一覧を取得 (key: string)
     * @param string    $domain
     * @param string    $locale
     * 
     * @return array
     */
    public function getTransLationList($domain = 'messages', $locale = null)
    {
        if ($this->container->has('translator')) {
            $translator = $this->container->get('translator');
            // 言語の指定がない場合 paramaterの言語を指定
            $locale = $locale ? $locale : $translator->getLocale();

            // トランスymlからデータを取得
            $translatorCatalogue = $translator->getCatalogue($locale);

            $translatorList = [];
            if ($translatorCatalogue->all($domain)) {
                return $translatorCatalogue->all($domain);
            }
        }

        return [];
    }

containerからtranslatorを取得。
$domeinは、メッセージやバリデーションのtrans情報を指定する。
$localは、ja,en等の対応言語を指定する。 nullの場合はparamete.ymlにあるlocalを取得

3.Vueにtransを設定する。

import Vue from 'vue';
import VueI18n from 'vue-i18n';

// 言語の設定
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'ja', // デフォルト言語はjaにしておくが、ブラウザの言語を拾ってきてここに入れる => 言語変更されたら書き換える
  messages: translation
});

 4.Vueで使う。

{{ $t("hoge.title") }}

これだけで、Vueの多言語対応が可能。

5.まとめ

symfonyのtrans情報を配列で取得する方法が見つからなかったので、今回は今後主要になるVue×symfonyの多言語対応の方法を書いてみました。

わかってしまえばとてもシンプルなので、ぜひ使ってみてください。