Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue is not defined

I am trying to build a demo app with Vue.js. What I am getting is an odd error that Vue is not defined.

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Vue JS Intro</title> </head> <body>     <div id="demo">         <p>{{message}}</p>         <input v-model="message">     </div>      <script type="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>      <script>         var demo = new Vue({             el: '#demo',             data: {                 message: 'Hello Vue.js!'             }         })     </script> </body> </html> 

What did I miss here? This is not a CDN issue as I also downloaded the library from the official website, used it and got the same result

index.html:15 Uncaught ReferenceError: Vue is not defined

like image 932
Vladimir Hraban Avatar asked Mar 24 '16 21:03

Vladimir Hraban


People also ask

Is not defined error in Vue?

In this article, you are going to learn about how to fix Uncaught ReferenceError: Vue is not defined. If you have faced this error, you should check the HTML file. In there if you link JavaScript file in the wrong order then write it in the right order and this will fix the problem.

What was not found in Vue?

To Solve export 'default' (imported as 'Vue') was not found in 'vue' Error You just need to update Vue loader to its latest version and which is 15.10. 0 You need to run the following command in your terminal: npm i [email protected] And now, Your error must be solved.

Is not defined JavaScript?

The JavaScript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.


2 Answers

jsBin demo

  1. You missed the order, first goes:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script> 

and then:

<script>     var demo = new Vue({         el: '#demo',         data: {             message: 'Hello Vue.js!'         }     }); </script> 
  1. And type="JavaScript" should be type="text/javascript" (or rather nothing at all)
like image 71
Roko C. Buljan Avatar answered Sep 22 '22 08:09

Roko C. Buljan


Sometimes the problem may be if you import that like this:

const Vue = window.vue; 

this may overwrite the original Vue reference.

like image 33
T.Todua Avatar answered Sep 23 '22 08:09

T.Todua