Vue not defined even though it's been imported

Question

So I have installed vuejs using npm:

"dependencies": {
    "vue": "^2.5.2"
}

And I have also imported it in my file:

import "vue"

const app = new Vue({

    el: "#app",
    template: `

        <div>
            <h1>Siddharth Knows It All</h1>
        </div>

    `

});

But the problem that I'm facing is that when I compile the code using webpack and run it on a local server, in the console it outputs Vue is not defined.

The console also outputs

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

Can anyone help me?

Answer 1

As far as I can tell, you should be using:

import Vue from 'vue';

It might be worthwhile to take a moment to read how the import statement actually works.

---

What you are doing essentially is importing the module for its side effects only:

Import a module for its side effects only

Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.

import '/modules/my-module.js';

What you want to be doing is import the default export of the module:

Importing defaults

It is possible to have a default export (whether it is an object, a function, a class, etc.). The import statement may then be used to import such defaults.

import myDefault from '/modules/my-module.js';