LaravelからVueにデータ渡す

ネット上の情報を収集してから、実装した上での心得を整理してみました。

背景

Bladeファイルでは、Laravel Controllerからのデータを受け取って使うことが可能ですが、Vue.jsファイルの中に同じことができるかどうかを知りたくて、調査してみました。

調査した結果だと現時点では同じことができなさそうですが、代案がありまして、これを実装すればControllerからViewに渡すデータをVue側で取れます。

jsの処理をBladeファイル内に実装すれば良いではないか？

そういうのも考えましたが、これも代案の一つ選択肢だと思います。
けど、やはりjs処理をBladeファイルに書きたくないので、別の案をしました。

対応方法

簡単な方法ですので、先に内容を書いておきます。
Bladeファイル内Controllerから渡してきたデータを受け取って、jsのGlobal変数に保存するとVue側で利用することが可能になります。

これからは対応の詳細を書きます。

1. 全体の構成
2. 本題に入る

全体の構成

Controllers

app/Controllers/xxxController.php
表示したいViewと渡したいデータを設定します。

xxxController.php

...略

public function index() {
    ...略
    return view('/yyy')->with('data', $data);
}

Views

1. resources/views/yyy.blade.php
   Viewの構成を管理します。
   また、laravel-mixを使ってVue関連処理のjsファイルをrequireしますので、Vue関連処理のjsファイル（resources/js/zzz.js）が必要となります。また、resources/js/zzz.jsにはresources/bootstrap.jsをrequireしています。

yyy.blade.php

...略
<script src="{{ mix('js/zzz.js') }}"></script>

zzz.js

require('../bootstrap');
...略

laravel-mixを使うため、webpack.mix.jsも編集します。

webpack.mix.js

mix
.js('resources/js/zzz.js', 'public/js')
.vue();

Routes

ルートを設定するため、routes/web.phpを編集します。

web.php

...略
Route::get('/xxx_index', [xxxController::class, 'index'])->name('xxx.index');

ここまでのまとめ

一つの画面を作成するには、追加＆修正が必要なファイルは下記となります。

• xxxController.php
• yyy.blade.php
• zzz.js
• webpack.min.js
• web.php

本題に入る

Vue側でControllerのデータを使う

対応方法にも書きましたが、まずはBladeファイル側でControllerのデータを受け取る。受け取ったデータをwindow.LaravelというGlobal変数に保存します。

同じ処理を各Bladeファイルに実装するのではなく、共通化できるようにしたいため、親Bladeファイル(base.blade.php)を作成し、その中に処理を実装し、各Bladeファイルがこの親Bladeファイルに継承するようにしました。
下記のように、<script>内にjsの処理を実装しました。

base.blade.php

...略
<script>
    window.Laravel = {!! json_encode(['data' => $data ?? null]) !!};
</script>

Vue側で利用する

let data = window.Laravel.data;

これでVue側で利用することができました！