Uncaught ReferenceError: Vue is not defined

Introduction

This is an error that occurred when using a simple mini app to read Vue.js on a CDN. I will keep it as a memorandum. Since it is a beginner, please point out any mistakes!

Uncaught ReferenceError: Vue is not defined When I wrote the following code to check the operation of vue.js, vue.js was not loaded.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="vue.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>Current{{ number }}Clicked times</p>
    <button>count up</button>
  </div>
  <script src="vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

//vue.js

new Vue({
  el: '#app',
  data: {
    number: 0
  }
})

<!-Solution-> The solution is simple. Just write the CDN for using Vue on the third line from the bottom above js is loaded. Put it inside the head tag or write it at the top of the body tag.

<!--Revised-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="vue.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>Current{{ number }}Clicked times</p>
    <button>count up</button>
  </div>
  <script src="vue.js"></script>
</body>
</html>

Finally

I hope it helps the super beginners of Vue.js.

Recommended Posts

Uncaught ReferenceError: Vue is not defined
[Rails 6] jQuery introduction ・ uncaught reference error $ is not defined Error solution
What is vue cli
Yarn is not installed
DateFormat is not thread safe
Ruby # {} is not variable expansion
[Rails] fields_for is not displayed