Vue.js 3: Cannot import Vue global object

Question

I'm going crazy trying to reconcile the Vue 3 CLI output into something that works with various tutorials and plugins that all use the Vue object, as in Vue.createApp(.... In my project, I can use

import {createApp} from 'vue';
createApp(...

but import Vue from 'vue'; results in Vue still being undefined. I have Vue 3 installed via NPM. Clearly there is something critical that I don't understand about NPM imports, how could the {createApp} import work if importing the whole module does not work?

From package.json:

"dependencies": {
    "@babel/polyfill": "^7.12.1",
    "apexcharts": "^3.22.1",
    "core-js": "^3.6.5",
    "d3": "^6.2.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-rc.1",
    "vue3-apexcharts": "^1.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "babel-plugin-transform-regenerator": "^6.26.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

Here is my temporary main.js. This prints 'undefined' followed by the correct createApp function definition:

import Vue from 'vue';
import {createApp} from 'vue';
console.log(Vue);   
console.log(createApp);

related: stackoverflow.com/questions/63768491/…

Rohim Chou
– Rohim Chou

2023-03-10 05:40:50 +00:00
Commented Mar 10, 2023 at 5:40 — Rohim Chou
– Rohim Chou, Commented Mar 10, 2023 at 5:40

Boussadjra Brahim · Accepted Answer · 2022-10-20 10:34:41Z

20

If you're working with CDN Vue is available as global variable which could be used to create instance by calling the method createApp like Vue.createApp({...}), but if you're working with a bundler which uses npm modules, there no Vue object imported from vue module so you should import createApp from it to create a new instance like :

import {createApp} from 'vue';
let app=new createApp({...})
app.use(somePlugin)
app.mount("#app")

for more details please check the migration guide of global API

edited Oct 20, 2022 at 10:34

answered Nov 2, 2020 at 21:18

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

7 Comments

Gregorio246 Over a year ago

Thanks. The reason I was looking into this is because one of the dependencies I am using, vue3-apexcharts, is throwing an error saying there is no global Vue object. I guess I'll file an issue for that project.

Boussadjra Brahim Over a year ago

@Gregorio246 according to this comment apex charts is not compatible with vue 3

Gregorio246 Over a year ago

The component that he talks about in that comment was released about a week ago, which is what I am using.

Boussadjra Brahim Over a year ago

You're talking about this one?

Gregorio246 Over a year ago

Yes, that's the one.

|

Collectives™ on Stack Overflow

Vue.js 3: Cannot import Vue global object

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related