README
Vue Next Mount
A tiny utility to programatically create and mount Vue 3 components. Inspired by mount-vue-component.
Features
- Support inject/provide
- Support v-model (sortof)
- Support reactive props
- Suport children/slots
Installation
npm install vue-next-mount
Basic Usage
import {createApp, defineComponent} from 'vue'
import { useMount, useUnmount } from 'vue-next-mount'
// Component to be rendered
const component = defineComponent({
template: `<div>
<span>Child Component</span>
<button @click="unmount">Unmount</button>
</div>`,
setup() {
const {
unmount
} = useUnmount()
return {
unmount
}
}
})
// Main App
const app = createApp({
template: `<div>
<button @click="mountComponent"></button>
</div>`,
setup() {
const {
mount
} = useMount()
function mountComponent() {
mount({
component,
appendTo: document.body
})
}
return {
mountComponent
}
}
})
API
mount({ component, props, children, appendTo, appContext, mount, beforeRender, parentInstance })
component
: required, the component to be created/mountedprops
: props to be passed onto the component, this can include HTML attributes likeid
orclass
.children
: components to be rendered as children ofcomponent
appendTo
: if specified, the element to mount the component into, if not specified, adiv
will be createdappContext
: the Vue app instance context fromcreateApp
, if provided will be bound to the component'sappContext
mount
: can be used to mount the component at later time. Default to truebeforeRender
: called before the component is mountedparentInstance
: used to inject parent provides
{ vNode, $el, unmount, mount }
returns vNode
: the instance of the component provideddestroy
: a function that will unmount and destroy the component$el
: will provide the HTML element the component is mounted intomount
: can be used to mount manually ifmount
prop is set to false