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
– BroiSatse, Commented Jun 16, 2020 at 9: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
– BroiSatse, Commented Jun 16, 2020 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
– user1319182, Commented Jun 16, 2020 at 10:30
So the link above solved the issue. And I had to remove the "template" attribute for it to work. — user1319182
– user1319182, Commented Jun 16, 2020 at 12:45

user1319182 · Accepted Answer · 2020-06-16 12:46:55Z

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

answered Jun 16, 2020 at 12:46

user1319182

4931 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IVO GELOV · Accepted Answer · 2020-06-16 09:47:36Z

-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, 2020 at 9:47

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

5 Comments

user1319182 Over a year ago

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?

IVO GELOV Over a year ago

Check out this JSfiddle jsfiddle.net/pc5Lubvd

user1319182 Over a year ago

Isn't that my current code with the "el" attribute changed from "toto" to "main"?

BroiSatse Over a year ago

@IVOGELOV - What's interesting is that your fiddle do not have template listed and it still works.

IVO GELOV Over a year ago

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 <template> tag in your HTML.

Collectives™ on Stack Overflow

Using Vue.js with Webpack

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related