Custom Components

Take element-plus(dialog) as an example (of course, you can use other component libraries)

<!-- overlay.vue -->
<script setup>
import { useDisclosure } from '@overlastic/vue'
import { defineEmits, defineProps } from 'vue-demi'
const props = defineProps({
  title: String,
})

const { visible, confirm, cancel } = useDisclosure({
  duration: 1000
})
</script>

<template>
  <el-dialog v-model="visible" :title="title" @close="cancel()">
    <!-- your content -->
    <button @click="confirm(`${title}:confirmed`)" />
  </el-dialog>
</template>

import { defineOverlay } from '@overlastic/vue'
import OverlayComponent from './overlay.vue'

const callback = defineOverlay(OverlayComponent)
const value = await callback({ title: 'myElDialog' })
// value === "myElDialog:confirmed"