How to add Vue to existing Webpack project

Question

I have a Webpack project, and I want to use Vue in it. I'm importing Vue in my JavaScript file like this:

import "../../node_modules/vue/dist/vue.min.js";

I can see vue.min.js in my bundle, but when I try to instantiate Vue in my HTML file or JavaScript file like this:

var app = new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello Vue!’
  }
})

I get this error in the console:

Uncaught ReferenceError: Vue is not defined
    at eval (ins.js?be14:2)
    at Object../src/scripts/ins.js (app.js:485)
    at __webpack_require__ (app.js:79)
    at eval (index.js?48f5:1)
    at Module../src/scripts/index.js (app.js:474)
    at __webpack_require__ (app.js:79)
    at Object.0 (app.js:530)
    at __webpack_require__ (app.js:79)
    at checkDeferredModules (app.js:46)
    at app.js:152

I tried to add vue.min.js directly in my HTML via CDN, and everything works fine. Is there is some ordering problem on load? How do I solve this problem?

Kris D. J. · Accepted Answer · 2018-11-28 10:20:57Z

3

You should import Vue to a variable like this:

import Vue from 'vue'; // or import Vue from '../../node_modules/vue/dist/vue.min.js';

It should then work with your example:

import Vue from 'vue';

var app = new Vue({
  el: ‘#app’,
  data: {
    message: ‘Hello Vue!’
  }
})

edited Nov 28, 2018 at 10:20

answered Nov 28, 2018 at 10:17

Kris D. J.

823 gold badges7 silver badges20 bronze badges

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

1 Comment

Kris D. J. Over a year ago

@user3348410 No problem ;)

Collectives™ on Stack Overflow

How to add Vue to existing Webpack project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related