Require Vue from JS file

Question

i'm pretty new to modern frontend development tools. I installed Nodejs and NPM. Downloaded some packages (es: "jquery") and everything worked. Then I installed Webpack (vers. 2), I created this demo config file

module.exports = {
   entry: "./entry.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
   }
};

In my JS entry point (entry.js) I can successfully use jQuery module, as follows

var $ = require("jquery");
$('#test').html('Changed!');

Everything works fine. The problem arises when I go for Vue. I install it

npm install vue --save

And then use it

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

I don't know how to import and then use the constructor. What I wrote clearly cannot be right! In fact I get this error

TypeError: Vue is not a constructor

What am I missing? (NOTE: I am not using any other tool, only Nodejs + NPM + Webpack2 and I would like to keep going using only these three, if possibile).

Thank you, Marco

Solution

Vue provides an ES module that is used by webpack. The constructor you expected is the default export, but require works a little differently so you need to access the default property on the import.

var Vue = require('vue').default;

Or you can use the import syntax which is supported by webpack. The equivalent import is:

import Vue from 'vue';

Comments

[Marco]

Thank you. It works with "var Vue = require('vue').default;" Isn't "import Vue from 'vue';" ES2016 syntax? So shouldn't I need to add Babel or stuff like that, in that case?

[Michael Jungo]

Webpack itself handles the ES imports syntax, no need for babel in that case.

[Rob]

For me, using mocha-webpack test runner, I needed to put this stanza in my setup.js file: global.Vue = require('vue'); global.Vuex = require('vuex'); global.Vue.use(global.Vuex)

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.