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?

Does your JS execute at all? Try adding some `console.log('HERE`)` at the top of the file — BroiSatse, Jun 16 '20 at 09:40
I'm not sure what your answer mean, but I'll assume it was printed out in the console? Is the code executing when element `#toto` has been loaded, i.e is the script loaded at the end of your html? — BroiSatse, Jun 16 '20 at 10:05
@BroiSatse I think I replied before you edited the original message. So to answer your question, all JS code works besides the Vue instantiation (I even added the log messages before and after the Vue part). Now oddly enough, when I change the "el" attribute to "#main", the whole main div is emptied. Does it help? — user1319182, Jun 16 '20 at 10:30
Well, this is more expected behaviour - Vue by default should empty the div and replace it with supplied component. However the fiddle in one of the answers seems to work differently. The top root component would normally have a render function or template, never seen it without those so I am really unsure what is happening under the hood (especially with that fiddle!) — BroiSatse, Jun 16 '20 at 12:06
One more thing to check - is the element present in the DOM when you instantiate Vue? Add `console.log(document.querySelector('#toto')` right before Vue call. — BroiSatse, Jun 16 '20 at 12:13
@BroiSatse yes it's present in the DOM of course. However I just noticed that after I initiate Vue on the "toto" element, the element disappears from the DOM and is replaced by a commented out line of code: This led me to this page, which I'm checking right now: https://stackoverflow.com/questions/49334815/vue-replaces-html-with-comment-when-compiling-with-webpack — user1319182, Jun 16 '20 at 12:39
So the link above solved the issue. And I had to remove the "template" attribute for it to work. — user1319182, Jun 16 '20 at 12:45

score 1 · Accepted Answer · answered Jun 16 '20 at 12:46

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'
    }
  }
}

score -1 · Answer 2 · answered Jun 16 '20 at 09:47

-1

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!'
  }
});

answered Jun 16 '20 at 09:47

IVO GELOV

13,496
1
17
26

I don't get it, but I tried your code and it didn't change anything. Can you elaborate on the new file structure and changes please? What does the "template" attribute do? – user1319182 Jun 16 '20 at 09:51
Check out this JSfiddle https://jsfiddle.net/pc5Lubvd/ – IVO GELOV Jun 16 '20 at 09:58
Isn't that my current code with the "el" attribute changed from "toto" to "main"? – user1319182 Jun 16 '20 at 10:01
1

@IVOGELOV - What's interesting is that your fiddle do not have `template` listed and it still works. – BroiSatse Jun 16 '20 at 10:01
The point is that if you use Webpack (and thus Single-File components in `*.vue` files) - you do not need the `template` property. If you are loading Vue at runtime on a plain HTML page - then you have to either provide the template as string or the ID of ` – IVO GELOV Jun 16 '20 at 14:02

Using Vue.js with Webpack

2 Answers2