Uncaught ReferenceError: Vue is not defined when installing vue in Index.html
I recently learned about vue
I have this file main.js
import Vue from 'vue/dist/vue.js'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)
var App = new Vue({
el: '#app',
data: {
message : "It working"
}
})
and here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<h3 id="app">{{ message }}</h3>
<script src="dist/build.js"></script>
<script>
</script>
</body>
</html>
He works. But now I am trying to do something with a script. I change main.js
(I use webpack
)
import Vue from 'vue/dist/vue.js'
import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)
then my index.html to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<h3 id="app">{{ message }}</h3>
<script src="dist/build.js"></script>
<script>
var App = new Vue({
el: '#app',
data: {
message:"It not working"
}
})
</script>
</body>
</html>
and i am getting this error
Unprepared ReferenceError: Vue is undefined
How can I fix this?
source to share
If you want to create a new instance Vue
directly in index.html
, you must either include the library in yours index.html
:
<script src="https://unpkg.com/vue@2.4.2"></script>
Or you need to assign an object Vue
to window
in main.js
the following way:
main.js:
import Vue from 'vue';
window.Vue = Vue;
then in index.html
you have access to Vue()
because it is a global property of the object window
.
source to share