LaravelでVueの利用

Question

LaravelでVueを使用し、コンポーネントを表示させることはできたのですが、各Bladeファイルで
<script src="{{ asset('/js/app.js') }}"></script>の様に読み込んでいては面倒だと思います。そこでlayoutsとしてlayouts/app.blade.phpで読み込ませたのですが、全てのBlade読み込ませるわけではないのでコンソールログに[Vue warn]: Cannot find element: #appとエラーが出力されてしまっています。
エラーメッセージが出ているのですが無視するわけにもいかないのでこれは全てのBladeファイルにid属性に#appを持たせるのが良いのでしょうか？

ファイル構成

Laravelインストール時に構成されているままのものを使っています。

resources/js/app.jsからresources/js/components/ExampleComponent.vueのコンポーネントを読み込み

Viewでは
resources/views/pages/index.blade.phpで表示させたい。

layoutは
resources/views/layouts/app.blade.php
になっています。

補足情報

laravel 7.x

---

必要な情報等がありましたら教えてください。

Comments

[m.ts10806]

どういう構成になってるんでしょうか。そして、どう表示させたいのでしょうか。コードをご提示ください。

[退会済みユーザー]

早速のご反応ありがとうございます！
構成に関してましては、Laravelのインストールされた際のままで、ExampleComponent.vueを読み込ませたいです
(質問に追記しときます)

[kai0310]

確かご提示のapp.jsを読み込ませるのはデフォルトで記述されていて特に記述を変更する必要はないはず。公式Docも特別読み込み方法は記載されていませんし。

( https://readouble.com/laravel/7.x/ja/frontend.html

Answer 1

app.blade.phpには<div id="app">があるので全viewに含めるのが普通。
https://github.com/laravel/ui/blob/da9350533d0da60d5dc42fb7de9c561c72129bba/src/Auth/bootstrap-stubs/layouts/app.stub

この辺りは6.0以降いろいろ変わっててドキュメントの説明も足りてない。
5.8まででもmake:authが必須ってことを知らずに間違ってる人が多かったけど。

Laravel7時点で一番確実なのは--authを付けて新規プロジェクトを作る。

laravel new my-project --auth

5.8+make:authと同じ認証やVue.jsを使う準備ができた状態で作られる。
これがLaravelの一番標準的な形。

Comments

[退会済みユーザー]

なるほど！そうだったのですねありがとうございます