Vue warn: Cannot find elemtnt #app エラーが消えない場合の対処法

Laravel・PHP豆知識・トラブル対策

Laravelでこのエラーが出た場合、Javascriptタグにdeferを加えましょう。

また、<div id=’app’></div> がない場合には追加してください。

しつこいエラーを消すために3つの方法紹介します。

Vue warn: Cannot find elemtnt #app エラーが消えない場合の対処法

対処法① js/app.js のリンクの場所を移動

まずは、下記のJavascripリンクの場所を<head>から、</body>タグの近くに持っていってください。

<script src=”{{ asset(‘js/app.js’) }}”></script>
</body>

対処法② deferをつける

さらに、タグの中に deferを追加してみましょう。
  <script src=”{{ asset(‘js/app.js’) }}” defer></script>

対処法③ div idを追加

もし <div id=”app”> タグがない場合には、<body>下にでも追加します。
<body>
<div id=’app’></div>
じゅんこ
じゅんこ

対策後は、ブラウザを再読込して、エラーが消えているかチェック♪

Vue warn: Cannot find elemtnt #app エラーの原因

このエラーは、HTMLの本文よりもJavascriptが先に読み込まれてしまう時に出るようです。
Javascriptのタグの位置を変えたり、deferをつけたりして、Javascriptの読み込みを遅らせればエラーを回避できます。
また、Vueを有効にする際、Laravelがデフォルトでappを設定してしまいます。

本文中に appが含まれていない場合には、追加してみてくださいね。

Laravel・PHP豆知識・トラブル対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新版テキストに加え、Laravel8版~Laravel11版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新版テキストに加え、Laravel8版からLaravel11版もご用意しています♪

【Laravelをチームで学びたい方へ】
学習管理・コード添削・ライブ講義など5個の特徴
▶法人プランの詳細はこちら
ここからのお申込みで10%オフ!
※お支払い前に「ブログ申込み」とお伝えください

Laravelの本を書きました。【改訂版】でます!


ひつじが目印♪クリックするとamazonページへ。

書籍版【Laravelの教科書】改訂版でます。
最新版Laravel12に対応。
現在Amazonにて予約受付中。

ご予約いただいた方に、特典「いちばんやさしいLarave命名規則の説明」プレゼント♪
詳しくは下記ボタンをクリック

書籍の詳細と予約特典を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました