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

Try: `import Vue from 'vue'` – Saurabh Mar 15 '17 at 11:25 — Saurabh, Mar 15 '17 at 11:25

score 15 · Accepted Answer · answered Mar 15 '17 at 11:32

15

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

answered Mar 15 '17 at 11:32

Michael Jungo

31,583
3
91
84

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? – Marco Mar 15 '17 at 16:05
1

Webpack itself handles the ES imports syntax, no need for babel in that case. – Michael Jungo Mar 15 '17 at 16:23
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) – Rob Jun 05 '18 at 16:30

Erzhan · Answer 2 · 2021-11-16T10:38:35.130

//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());

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](/help/how-to-answer). — Community, Nov 15 '21 at 14:29

Require Vue from JS file

2 Answers2

Linked