Vue+Symfonyの多言語対応

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

 

使用するもの

  • Vue2.x
  • symfony
  • vue-i18n

 1.Vue.jsのi18nプラグイン

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

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

2.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の多言語対応の方法を書いてみました。

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