vue-next-mount

Vue utility to programmatically create and mount Vue 3 components.


Keywords
vue, vue-next, mount, extend
License
MIT
Install
npm install vue-next-mount@1.0.3

Documentation

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 like id or class.
  • children: components to be rendered as children of component
  • appendTo: if specified, the element to mount the component into, if not specified, a div will be created
  • appContext: the Vue app instance context from createApp, if provided will be bound to the component's appContext
  • 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
returns { vNode, $el, unmount, mount }
  • 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 if mount prop is set to false