useConfirmDialog
Creates event hooks to support modals and confirmation dialog chains.
Functions can be used on the template, and hooks are a handy skeleton for the business logic of modals dialog or other actions that require user confirmation.
Demo
Functions and hooks
reveal()- triggersonRevealhook and setsrevealed.valuetotrue. Returns promise that resolves byconfirm()orcancel().confirm()- setsisRevealed.valuetofalseand triggersonConfirmhook.cancel()- setsisRevealed.valuetofalseand triggersonCancelhook.
Basic Usage
Using hooks
<script setup>
import { useConfirmDialog } from '@vueuse/core'
const {
isRevealed,
reveal,
confirm,
cancel,
onReveal,
onConfirm,
onCancel,
} = useConfirmDialog()
</script>
<template>
<button @click="reveal">Reveal Modal</button>
<teleport to="body">
<div v-if="isRevealed" class="modal-bg">
<div class="modal">
<h2>Confirm?</h2>
<button @click="confirm">Yes</button>
<button @click="cancel">Cancel</button>
</div>
</div>
</teleport>
</template>
<script setup>
import { useConfirmDialog } from '@vueuse/core'
const {
isRevealed,
reveal,
confirm,
cancel,
onReveal,
onConfirm,
onCancel,
} = useConfirmDialog()
</script>
<template>
<button @click="reveal">Reveal Modal</button>
<teleport to="body">
<div v-if="isRevealed" class="modal-bg">
<div class="modal">
<h2>Confirm?</h2>
<button @click="confirm">Yes</button>
<button @click="cancel">Cancel</button>
</div>
</div>
</teleport>
</template>
Promise
If you prefer working with promises:
<script setup>
import { useConfirmDialog, onClickOutside } from '@vueuse/core'
const {
isRevealed,
reveal,
confirm,
cancel,
} = useConfirmDialog()
const openDialog = async () => {
const { data, isCanceled } = await reveal()
if (!isCanceled) {
console.log(data)
}
}
</script>
<template>
<button @click="openDialog">Show Modal</button>
<teleport to="body">
<div v-if="isRevealed" class="modal-layout">
<div class="modal">
<h2>Confirm?</h2>
<button @click="confirm(true)">Yes</button>
<button @click="confirm(false)">No</button>
</div>
</div>
</teleport>
</template>
<script setup>
import { useConfirmDialog, onClickOutside } from '@vueuse/core'
const {
isRevealed,
reveal,
confirm,
cancel,
} = useConfirmDialog()
const openDialog = async () => {
const { data, isCanceled } = await reveal()
if (!isCanceled) {
console.log(data)
}
}
</script>
<template>
<button @click="openDialog">Show Modal</button>
<teleport to="body">
<div v-if="isRevealed" class="modal-layout">
<div class="modal">
<h2>Confirm?</h2>
<button @click="confirm(true)">Yes</button>
<button @click="confirm(false)">No</button>
</div>
</div>
</teleport>
</template>
Type Declarations
Show Type Declarations
export declare type UseConfirmDialogRevealResult<C, D> =
| {
data?: C
isCanceled: false
}
| {
data?: D
isCanceled: true
}
export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
/**
* Revealing state
*/
isRevealed: ComputedRef<boolean>
/**
* Opens the dialog.
* Create promise and return it. Triggers `onReveal` hook.
*/
reveal: (
data?: RevealData
) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>
/**
* Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
* Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
* Can accept any data and to pass it to `onConfirm` hook.
*/
confirm: (data?: ConfirmData) => void
/**
* Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
* Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
* Can accept any data and to pass it to `onCancel` hook.
*/
cancel: (data?: CancelData) => void
/**
* Event Hook to be triggered right before dialog creating.
*/
onReveal: EventHookOn<RevealData>
/**
* Event Hook to be called on `confirm()`.
* Gets data object from `confirm` function.
*/
onConfirm: EventHookOn<ConfirmData>
/**
* Event Hook to be called on `cancel()`.
* Gets data object from `cancel` function.
*/
onCancel: EventHookOn<CancelData>
}
/**
* Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
*
* @see https://vueuse.org/useConfirmDialog/
* @param revealed `boolean` `ref` that handles a modal window
*/
export declare function useConfirmDialog<
RevealData = any,
ConfirmData = any,
CancelData = any
>(
revealed?: Ref<boolean>
): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
export declare type UseConfirmDialogRevealResult<C, D> =
| {
data?: C
isCanceled: false
}
| {
data?: D
isCanceled: true
}
export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
/**
* Revealing state
*/
isRevealed: ComputedRef<boolean>
/**
* Opens the dialog.
* Create promise and return it. Triggers `onReveal` hook.
*/
reveal: (
data?: RevealData
) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>
/**
* Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
* Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
* Can accept any data and to pass it to `onConfirm` hook.
*/
confirm: (data?: ConfirmData) => void
/**
* Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
* Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
* Can accept any data and to pass it to `onCancel` hook.
*/
cancel: (data?: CancelData) => void
/**
* Event Hook to be triggered right before dialog creating.
*/
onReveal: EventHookOn<RevealData>
/**
* Event Hook to be called on `confirm()`.
* Gets data object from `confirm` function.
*/
onConfirm: EventHookOn<ConfirmData>
/**
* Event Hook to be called on `cancel()`.
* Gets data object from `cancel` function.
*/
onCancel: EventHookOn<CancelData>
}
/**
* Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
*
* @see https://vueuse.org/useConfirmDialog/
* @param revealed `boolean` `ref` that handles a modal window
*/
export declare function useConfirmDialog<
RevealData = any,
ConfirmData = any,
CancelData = any
>(
revealed?: Ref<boolean>
): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
Source
Contributors
Roman Harmyder
Anthony Fu
Ryan Wu