CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2
user3348410
user3348410

Reputation: 2833

How to add Vue to existing Webpack project

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?

Upvotes: 0

Views: 856

Answers (1)

Kris D. J.
Kris D. J.

Reputation: 72

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!’
  }
})

Upvotes: 3

Related Questions