CODEWITHSUNDEEP
webpackvue.js
AngeloC
AngeloC

Reputation: 3533

use webpack with vue, but require seems not working

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,

Upvotes: 7

Views: 11097

Answers (3)

AngeloC
AngeloC

Reputation: 3533

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

Upvotes: 11

Saurabh
Saurabh

Reputation: 73669

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

Upvotes: 2

Marek Urbanowicz
Marek Urbanowicz

Reputation: 13684

Look at the code below. You are not creating new variable, that's why you can't use: var app = ... . Just call new Vue.

Also, replace require with ES6 import import Vue from 'vue'

import Vue from 'vue'

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

    methods: {

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

Similar as in official VueJS Webpack template. https://github.com/vuejs-templates/webpack/blob/master/template/src/main.js

Upvotes: 0

Related Questions