https://github.com/pearofducks/mount-vue-component
a tiny utility to programatically create and mount Vue 3 components (e.g. a Vue.extend replacement)
https://github.com/pearofducks/mount-vue-component
component extend vue-3
Last synced: 11 months ago
JSON representation
a tiny utility to programatically create and mount Vue 3 components (e.g. a Vue.extend replacement)
- Host: GitHub
- URL: https://github.com/pearofducks/mount-vue-component
- Owner: pearofducks
- License: mit
- Created: 2020-09-19T18:43:26.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-30T12:49:18.000Z (almost 2 years ago)
- Last Synced: 2025-06-26T05:37:36.264Z (about 1 year ago)
- Topics: component, extend, vue-3
- Language: JavaScript
- Homepage:
- Size: 105 KB
- Stars: 107
- Watchers: 3
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mount-vue-component
## install
```shell
yarn add mount-vue-component
```
## use
```js
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 like `id` or `class`
- `children`: components to be rendered as children of `component`
- `element`: if specified, the element to mount the component into, if not specified, a `div` will be created
- `app`: the Vue app instance from `createApp`, if provided will be bound to the component's `appContext`
##### 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