mount-vue-component
mount-vue-component copied to clipboard
a tiny utility to programatically create and mount Vue 3 components (e.g. a Vue.extend replacement)
mount-vue-component
install
yarn add mount-vue-component
use
import { mount } from 'mount-vue-component'
import { h } from 'vue'
const comp = {
props: ['name'],
setup: (props) => () => h('h1', `Hello, ${props.name}!`),
unmounted() { console.log("Bye") },
mounted() { console.log("Hi") }
}
const { vNode, destroy, el } = mount(comp, { props: { name: 'world' } })
api
mount(component, { props, children, element, app })
-
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
-
element
: if specified, the element to mount the component into, if not specified, adiv
will be created -
app
: the Vue app instance fromcreateApp
, if provided will be bound to the component'sappContext
returns { vNode, destroy, el }
-
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