Vue Mountable is a tiny DOM Library for Vue 3.

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.

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.

Roadmap

• [ ] Devtools Support
• [x] Allow resolveComponent and resolveDynamicComponent
• [x] Allow defineComponent and defineAsyncComponent
• [x] 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
• [x] Remove teleported DOM Message after destroying an Element (it just gets messy after multiple mounting usages)
• [x] Multi Instance Support
• [ ] CDN Support (script tag)
• [x] Better Typing (to many any's)

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