Roadmap

• Host Documentation & Example
• Implement Example into Documentation
• Fix some API Reference in Documentation (there is just some tiny parts missing)

planned for 0.1.2 (probably for next week)

To reproduce

        const props = { visible: true }
        mountComponent(MyModal, { props })
        setTimeout(() => { props.visible = false }, 1000)

Expected

Visible should be set to false and watcher in myMyModal should notice it.

What happens

MyModal remains unchanged.

Please delete. I've figured it out 😊

Why not use browser console?

At the moment it is required to have only one tag in the mounted component, otherwise these errors will appear.

--> Solution:
This is basically the same approach as before 0.1 - adding inheritAttrs: false to each mounted component. However it was removed due to the fact that attributes then, including props etc are automatically removed, which might be not ideal.

It should automatically check if a component contains multiple fragments and then apply inheritAttrs: false, this should align with vue 3

Roadmap

• Devtools Support
• Allow resolveComponent and resolveDynamicComponent
• Allow defineComponent and defineAsyncComponent
• Allow HTML Tags to get mounted directly (this should make things easier then having to use a vue component every single time)
• Add native Vue Transitions
• Remove teleported DOM Message after destroying an Element (it just gets messy after multiple mounting usages)
• Multi Instance Support
• CDN Support (script tag)
• Better Typing (to many any's)

Let me know if there are other Features that would work well with this Library!

As far as I can tell, there isn't currently a build of this library that can be used directly from a CDN via a <script> tag.

Even though such builds aren't typically used in production, they are very commonly used when asking questions (Discord, SO, etc.) and for reporting issues on GitHub.

Current big Issue is that calling the useComponent like this:

> useDialog.js
import { useComponent } from 'vue-mountable';

export function useDialog() {
	const { mount, destroy } = useComponent();

	const component = mount(dialog);
}

> app.vue
<script setup>
function test() {
    useDialog() // error
}
</script>

wont work as there is no vue instance, while calling it inside setup() or script setup will work like it should.

service.ts shares container, node and instance between usages. This causes problems if the plugin is installed on multiple apps. e.g.:

import { createApp } from 'vue'
import { VueMountable } from 'vue-mountable'
import App from './App.vue'

const app = createApp(App)
app.use(VueMountable)
app.provide('msg', 'app1')
app.mount('#app')

const app2 = createApp(App)
app2.use(VueMountable)
app2.provide('msg', 'app2')
app2.mount('#app2')

The functions provided by useComponent will then be bound to the second app in both cases. So, for example, attempting to inject the msg from inside a component mounted by VueMountable will always show app2, irrespective of which app it is in.