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
– Saurabh

2017-03-15 11:25:46 +00:00
Commented Mar 15, 2017 at 11:25 — Saurabh
– Saurabh, Commented Mar 15, 2017 at 11:25

Michael Jungo · Accepted Answer · 2017-03-15 11:32:43Z

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, 2017 at 11:32

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marco Over a year ago

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 Over a year ago

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

Rob Over a year ago

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)

Erzhan · Accepted Answer · 2021-11-16 10:38:35Z

-1

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

edited Nov 16, 2021 at 10:38

answered Nov 15, 2021 at 13:55

Erzhan

11 bronze badge

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

Require Vue from JS file

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related