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

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

• javascript
• npm
• webpack
• vue.js
• web-frontend

• Try: import Vue from 'vue' – Saurabh Commented Mar 15, 2017 at 11:25

2 Answers 2

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';

//fullscreenchange//
document.addEventListener('fullscreenchange', () => {
  isFullscreen.value = !!document.fullscreenElement;
})

//onDrop in MyDropZone//
const file = event.dataTransfer.files[0];
  const reader = new FileReader();
  reader.readAsText(file, 'UTF-8')
  reader.onload = function (evt) {
    parseTextToItems(evt.target.result)
  }

//onDrop in MyTable//
let toSwap = {}
  props.items.filter(x => {
    if (x.cellID === cellID)
      toSwap = x
  })

  let items = props.items.map(x => {
    if (x.id === itemID)
    {
      toSwap.cellID = x.cellID
      x.cellID = cellID
    }
    return x
  })

  items = items.map(x => {
    if (x.id === toSwap.id)
      x.cellID = toSwap.cellID
    return x
  })


function buildExportText() {
  let text = "# VIP List \n \n"

  tableData.value.forEach(row => {
    row.forEach(cell => {
      let item = items.value.filter(x => {
        if (x.cellID === cell.id)
          return x
      })[0] || {};
      text += `- ${item.name || ''}\n`
    })
  })

  return text
}

function download(data, name = "VIP_data.txt") {
  const blob = new Blob([data], {type: "octet-stream"});
  const href = URL.createObjectURL(blob);

  const a = Object.assign(
      document.createElement('a'), {
        href,
        style: "display:none",
        download: name
      });

  a.click();
  a.remove();
  URL.revokeObjectURL(href);
}

//To copy//
navigator.clipboard.writeText(this.buildExportText());