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の多言語対応の方法を書いてみました。
わかってしまえばとてもシンプルなので、ぜひ使ってみてください。