Laravel と Vuejs の連携 laravel 側の データを vuejs template 内で使用する

Updated: 2024_02_16

環境：

laravel@8.79.0

vue@2.6.14

@app.blade.php

<div id="vue">

　　<app-pageBody :passing-data="`{{ Sesssion::get('passingData'); }}`"></app-pageBody>

必ずバッククォート``で囲う

</div>

@someController.php

　　session()->put('passingData', "Hello this is a passing data");

＠PageBody.vue

　　props: ['passingData']

　　this.passingData でLaravel側のデータを受け取り可能になる

このとき blade template 内で props name をケバブケースにしないとvueにpropsをパスできないことに注意。キャメルケースはダメ。