useConfirmDialog

Demo

Functions and hooks

reveal() - triggers onReveal hook and sets revealed.value to true. Returns promise that resolves by confirm() or cancel().
confirm() - sets isRevealed.value to false and triggers onConfirm hook.
cancel() - sets isRevealed.value to false and triggers onCancel hook.

Basic Usage

Using hooks

vue

<script setup lang="ts"> 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:

vue

<script setup lang="ts"> import { useConfirmDialog } from '@vueuse/core'  const {  isRevealed,  reveal,  confirm,  cancel, } = useConfirmDialog()  async function openDialog() {  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 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  *  * @__NO_SIDE_EFFECTS__  */ export declare function useConfirmDialog<  RevealData = any,  ConfirmData = any,  CancelData = any, >(  revealed?: ShallowRef<boolean>, ): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>