Uncaught ReferenceError: vue is not defined対策3選 試してみてください

LaravelとVue連携

Vueを初めて使った時。「Uncaught ReferenceError: vue is not defined」が出てなぜか解決しない時に試してみてください。

わたしはこのミスに遭遇して、英語・日本語のサイトをググりまくりました^^;

そこで見つけた対策と、最終的にわたしがエラーをなおした対策を入れております。

同じように困った方の参考になればうれしいです。

Uncaught ReferenceError: vue is not defined対策3選

① コードの位置を間違えている

CDNで読み込む場合には、位置に注意してください。

下記のコードが、Vueのコードの上部に来る必要があります。

なおネット上には htmlの<head></head>内にいれたらなおった、という例もありました。

② Javascriptのタイプ指定エラー

ファイル内でJavascriptのタイプを指定している場合は、正確に指定しましょう。

ダメな例

<script type=”JavaScript” src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js”>

良い例

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js”>

タイプは入れなくても良いのですが、もし入れる場合にはご注意を。

③ スペルミス、ケアレスミス

一番くやしくて、そして意外と見つけにくいのがこのパターン

ケアレスミスは、Googleのデベロッパーツールを利用すると見つけやすいです。

WindowsならF12キー、MacならCommand+Option+Iキーを押して起動。

そして【Sources】タブをクリック。

するとミスっているところに×マークが。

上記は、Vue を vue と小文字で入れているためにエラーになっています。

修正すると、下記のように表示されます。

【ブラウザ】

【コード】

わたしは、このケアレスミスでミスりました。
じゅんこ
じゅんこ

ケアレスミスって発見したときはうれしいと同時に、時間をむだにした気がして、少し悲しくもなりますね。

あなたのエラーが無事解決することを願っています!
LaravelとVue連携

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

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

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

【無料プレゼント】

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

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

詳細はこちらをクリック

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

Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。

デプロイ講座とVue.js講座付

StripeやChatGPT連携など過去10回分のセミナー動画視聴可能。

Laravel実践スキルをのばしたい方におすすめです。

ラボの案内を見てみる

Laravelの本を書きました。


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

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


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

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

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

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