Using Vue.js with Webpack

Question

I'm using Vue.js for the first time and can't get the simplest code snippet to work. I'm currently adding it to an existing project using Webpack and this is what the code looks like in my js file:

import Vue from 'vue'
import 'bootstrap';
...

var app = new Vue({
  el: '#toto',
  data: {
    message: 'Hello Vue!'
  }
});

And my HTML is quite long but this is what I'm trying to do:

<div id="main">
  <div class="container">
    <div id="toto">{{ message }}</div>
    <h2 class="title">Search results</h2>
  </div>
</div>

So when I run the js code above, the "toto" div is empty. I'm not getting any compilation error in Webpack and no error in the Chrome console either.

What am I doing wrong?

Answer 1

I found the solution here: Vue replaces HTML with comment when compiling with webpack

The following code added to the Webpack configuration file did the trick:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

Answer 2

When you use Webpack Vue usually expects Single-File components ( *.vue ) - you can not put a template inside your public HTML file. So you have to do something like this:

var app = new Vue({
  el: '#toto',
  template: '{{ message }}',
  data: {
    message: 'Hello Vue!'
  }
});