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
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.
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.
The JavaScript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.
jsBin demo
<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>
type="JavaScript"
should be type="text/javascript"
(or rather nothing at all)Sometimes the problem may be if you import
that like this:
const Vue = window.vue;
this may overwrite the original Vue
reference.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With