0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Vue】uncaught referenceerror: vue is not definedに遭遇

Posted at

今まで使えていたVueのアプリが突然使えなくなった

以前勉強用にアプリ作成をしていたのだが,久々に開いてみるとタイトル以下が表示されない。
コンソール画面を開くと以下のエラーが表示された。

image.png

Vue is not definedということなので,Vueとして認識されていないようだ。

調査

試しにエラー文をそのまま打ち込むと,参考になる記事を発見。

こちらではCDNの記載位置に言及している。自分の場合Scriptタグは位置は合っていたのだが,こちらの記事が解決への糸口になった。

scriptタグの確認

最終的にはscriptタグの内容誤りだった。まずCDN読み込みを以下のように設定していた。

HTML
<script src="https://unpkg.com/vue@next" defer></script>

恐らく参照していた講座からそのまま持ってきたものである。これが原因かと思い,Vue.jsの公式ガイドを確認したところ,正しくは以下で指定する必要があった。

HTML
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

これにより,無事エラーもなくVueアプリが使えるようになった。

image.png

終わりに

今回は単純なミスだったため時間をかけずに調べることができたが,それもVueの公式ガイドや関連するQiitaの記事のおかげである。
このようなドキュメントを読む力を今後養っていきたい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?