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/mounted -
props
: 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 created -
appContext
: 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 true -
beforeRender
: called before the component is mounted -
parentInstance
: used to inject parent provides
{ vNode, $el, unmount, mount }
returns -
vNode
: the instance of the component provided -
destroy
: a function that will unmount and destroy the component -
$el
: will provide the HTML element the component is mounted into -
mount
: can be used to mount manually ifmount
prop is set to false