Vue Dynamic Mounting

Programmatically mount your component anywhere

Installation

pnpm add vue-dynamic-mounting
# or
npm i vue-dynamic-mounting
# or
yarn add vue-dynamic-mounting

Usage

In your <script> block

import { useMounting } from 'vue-dynamic-mounting'

const { mount, componentMounted } = useMounting()

function openDialog() {
  const { unmount } = mount(Dialog, { content: 'HelloWorld', onClose: unmount }, '#dialog-teleport')
}

<template> block:

<section>
  <button @click="openDialog">
    Open Dialog
  </button>

  <div id="dialog-teleport"></div>
</section>