Can you help me build a composable that inserts a component programmatically?

[intaek-h]

I want to build a composable that renders an <AlertDialog /> in the App programmatically. The desired syntax is like below.

const confirm = useConfirmDialog()

async function someWork() {
  ...

  const isConfirmed = await confirm.show<typeof CustomDialog>(CustomDialog, { ...props }, { ...slots });

  if (!isConfirmed) return

  ...
}

I finished the most of it but I'm struggling to find out the best way to programmatically insert a vue component into the App.

I used Vue.render() function with Vue.h() but it doesn't provide a syntax to unmount the inserted component programmatically thus being troublesome when debugging.

It's also confusing if it maintains the App's context.

the simplified code of the composable:

import type { ComponentProps, ComponentSlots } from 'vue-component-type-helpers'

import { h, render, type Component, type VNode } from 'vue'

export function useConfirm() {
  async function show<T extends Component | VNode>(
    component: T,
    props?: ComponentProps<T>,
    slots?: Partial<ComponentSlots<T>>,
  ) {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    let resolve = (_value: boolean) => {}
  
    const promise = new Promise<boolean>((res) => (resolve = res))
  
    const vNode = h(
      component,
  
      // props + events
      {
        onCancel: () => {
          render(null, dialogContainer) // remove vNode 
          resolve(false)
        },
  
        onConfirm: () => {
          render(null, dialogContainer) // remove vNode 
          resolve(true)
        },
  
        ...props,
      },
  
      // slots
      slots,
    )
  
    const dialogContainer = document.getElementById('popups') as HTMLDivElement
  
    render(vNode, dialogContainer)
  
    return promise
  }

  return { show }
}

I want to know if I'm completely missing something crucial because the work is harder than I expected which I believe should be fairly easy.

• I'm using Radix-Vue's AlertDialog for the component to render.

[posva]

Please, use the Discord server, or StackOverflow for questions.