use webpack with vue, but require seems not working

Question

I use webpack to bundle js, sample:

var Vue = require('vue')

var app = new Vue({
    el: '#app',
    data: {
        info: { email: '' },
        email: ''
    },

    methods: {

        onSignin: function (e) { },
    }
})

use Webpack to generate a bundle and include it in html, got error:

test3b.js:7019 Uncaught TypeError: Vue is not a constructor(…)

any idea what missing here? thanks,

Answer 1

var Vue = require('vue')

is correct, but it pulls in the runtime version by default:

vue/dist/vue.runtime.common.js

this will trigger an error and yet labeled as warning, need to tell webpack to pull in another version,

vue/dist/vue.min.js

to do that, add following into webpack.config.js:

resolve: {
    alias: {
      vue: 'vue/dist/vue.min.js'
    }
}

this is documented here, but just not easy to locate

Answer 2

You can checkout vue-hackernews-2.0 project which provides a sample implementation of vue with webpack, in their app.js, you will find following:

import Vue from 'vue'

You must already be having vue dependency in package.json, as it is here and you have installed it via: npm install