【Laravel】 [Vue warn]: Cannot find element: #app エラーの対処法

えびさん

Laravelで [Vue warn]: Cannot find element: #app エラーが
コンソールに出た場合の対処法メモ

対処法① deferをつける

<script src="{{ asset('js/app.js') }}" defer></script>
deferとは?

defer属性をつけると、呼び出し場所に関係なく
ページ読み込み完了のタイミングでそのJavaScriptファイルを読んでくれる

JavaScriptファイルが呼び出されるのはHTMLの読み込みが終わった後
つまりDOMContentLoaded イベントの直前なので、
今回のようなCannot find elementエラーを回避できる

しかしdeferをつけることで他のJavaScriptライブラリと競合したりすることもしばしば…
そんな時は下記の対処法②がおすすめ

解決策② </body>の直前で読み込む

単純に、HTMLソースの読み込みが終わった最後の段階で呼び出せばOK

<script src="{{ asset('js/app.js') }}"></script>
</body>