Mount component in dynamic created div without creating new Vue instance or teleport

44 Views Asked by At

In Vue 2 we could use $mount to mount a component inside a dynamically created div. Now using Vue3 we can not, instead we need to use the teleport element or create a new app instance.

Is there an alternative way? I created a custom cytoscape.js extension that creates html dom elements and places it over every cytoscape.js node. I want to mount a Vue component in this dynamic created div - so i cant use the teleport element, or the :is directive.

What im currently doing is creating a new instance with createApp and mount the component in there. Now this works but this does mean that it will create Vue instances for all nodes, so when i have 10 nodes - it will create 10 new instances. This is alot of overhead, especially because im using Framework7 Vue and I18n which i need to import in each of these instances.

So i am wondering if this is actually the best way to do this, or if there is an alternative way to be able to mount a component directly into a div by using the main Vue instance instead of having to create a separate instance.

0

There are 0 best solutions below