Vue3 Createapp

Posted on  by admin

Modified6 months ago. I'm migrating from Vue 2 to Vue 3. In Vue 2, it's possible to register a component globally like this: main.js. A global registration of a component: my-component.js. I'm using Webpack for import Single File Components in other components, and then i'm bundling it in one file.

With Vue 2, that was easy because Vue instance was globally registered. Now with Vue 3, that doesn't work any more because of Vue.createApp({}).mount('#app'). I was trying to do something like this: main.js.

And in: my-component.js. And at the end: close-app.js. And in: index.html. I'm importing the app because of Webpack. Webpack is bundling it in self-invoking functions, but that doesn't work.

I know there is a way to declare it globally like this: window.app = app;, but that's not a good idea. Can someone help me with that?

Where to Continue Learning

8181 bronze badges. 37222 gold badges55 silver badges2828 bronze badges. 55 silver badges2828 bronze badges. Since Vue 3 component registration has to be invoked on an app instance, and you're importing each component Webpack individually, I don't think you can avoid globals.

Using a global app instance (window.app) in your components might be the easiest solution, especially if you want to minimize the changes. Alternatively, you could build the components as UMD modules, where the component definition is exported as a global, import the UMD module with the