先日、すでに出来上がっているLaravelのサイトの特定のページにvueを使用することがありました。

vueのページで非同期で値を取得しても良いのですが、同時にbladeを通して変数をLaravel側からvue側へ受け渡すのはどうしたら良いのだろうかというのを調べたので今日はそのことを記事にします。

resources/js/app.jsの設定

まず、コンポーネントの設定をおこないます。

blade側での対応

bladeでは、v-bindでvueへ変数の受け渡しをします。

vueのコンポーネント

vue側では、propsで値を受け、引き渡された変数を利用することができます。
この例では、受け渡されてmessagesをv-forで回して表示しています。

コントローラ(Laravel)

コントローラ側では、DBから値を取得して、Jsonを返しています。

今回は、Laravel + Vue.jsでBladeを通して変数を受け渡す方法について紹介しました。
全てのページでSPA対応されたサイトではなく、特定のページのみvueを使用したいことというのはあると思います。
そのような際には、同じようなやり方(bladeで変数を受け渡さないだけ)で、vueで非同期で値を取得するという方法でも
bladeを通して、vueを使用することができます。

laravelを使用していて、特定のページのみだけvueを使用したい際などに参考にしてください。