I am trying to start using vue.js and having issue setting it up. In my package.json I installed the latest version "vue": "^2.6.14", and in my main.js folder I included like this
import Vue from "vue";
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
and in my html file I added this:
<div id="app">
{{ message }}
</div>
when webpack compiles, it creates this main.js file but the {{ message }} is not changed to Hello Vue!. What I am doing wrong here that this is not working?
Also no error is showing in dev tools.
Try
import Vue from "vue";
var app = new Vue({
el: '#app',
data () {
return {
message: "Hello Vue!"
}
}
}).$mount('#app');
This would solve your problem
import Vue from "vue";
new Vue({
data() {
return {
message: 'Hello Vue!',
};
},
}).$mount('#app');