If you want to create custom components, simplify component DTL syntax, and utilize function calls, consider using @unoverlays/vue.
<!-- overlay.vue -->
<script setup>
import { defineProps } from 'vue'
import { useOverlayMeta } from '@unoverlays/vue'
const props = defineProps({
content: String,
})
// Access overlay information with useOverlayMeta
const { visible, resolve, reject } = useOverlayMeta({
animation: 1000, // Set the duration of the overlay animation to prevent premature destruction
})
</script>
<template>
<v-dialog v-model="visible">
<div>{{ content }}</div>
<button @click="resolve(`${content}:confirmed`)"> click confirm </button>
</v-dialog>
</template>
To transform the component into a modal dialog in JavaScript / Typescript, use the defineOverlay method.
import { defineOverlay } from '@unoverlays/vue'
import OverlayComponent from './overlay.vue'
// Convert to imperative callback
const callback = defineOverlay(OverlayComponent)
// Call the component and retrieve the resolve callback value
const value = await callback({ content: 'callbackOverlay' })
// value === "callbackOverlay:confirmed"
You can globally register Unoverlays to apply the application context to all popups.
// main.js
import { createApp } from 'vue'
import unoverlay from '@unoverlays/vue'
const app = createApp({})
app.use(unoverlay)
Alternatively, for more precise control, you can pass the context when rendering overlays.
import { renderOverlay } from '@unoverlays/vue'
import { getCurrentInstance } from 'vue-demi'
import Component from './overlay.vue'
// in your setup method
const { appContext } = getCurrentInstance()!
renderOverlay(Component, {
props: {},
appContext
})