1---
2category: Utilities
3---
4 
5# useConfirmDialog
6 
7Creates event hooks to support modals and confirmation dialog chains.
8 
9Functions 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.
10 
11## Functions and hooks
12 
13- `reveal()` - triggers `onReveal` hook and sets `revealed.value` to `true`. Returns promise that resolves by `confirm()` or `cancel()`.
14- `confirm()` - sets `isRevealed.value` to `false` and triggers `onConfirm` hook.
15- `cancel()` - sets `isRevealed.value` to `false` and triggers `onCancel` hook.
16 
17## Basic Usage
18 
19### Using hooks
20 
21```vue
22<script setup lang="ts">
23import { useConfirmDialog } from '@vueuse/core'
24 
25const { isRevealed, reveal, confirm, cancel, onReveal, onConfirm, onCancel }
26  = useConfirmDialog()
27</script>
28 
29<template>
30  <button @click="reveal">
31    Reveal Modal
32  </button>
33 
34  <teleport to="body">
35    <div v-if="isRevealed" class="modal-bg">
36      <div class="modal">
37        <h2>Confirm?</h2>
38        <button @click="confirm">
39          Yes
40        </button>
41        <button @click="cancel">
42          Cancel
43        </button>
44      </div>
45    </div>
46  </teleport>
47</template>
48```
49 
50### Promise
51 
52If you prefer working with promises:
53 
54```vue
55<script setup lang="ts">
56import { useConfirmDialog } from '@vueuse/core'
57 
58const {
59  isRevealed,
60  reveal,
61  confirm,
62  cancel,
63} = useConfirmDialog()
64 
65async function openDialog() {
66  const { data, isCanceled } = await reveal()
67  if (!isCanceled)
68    console.log(data)
69}
70</script>
71 
72<template>
73  <button @click="openDialog">
74    Show Modal
75  </button>
76 
77  <teleport to="body">
78    <div v-if="isRevealed" class="modal-layout">
79      <div class="modal">
80        <h2>Confirm?</h2>
81        <button @click="confirm(true)">
82          Yes
83        </button>
84        <button @click="confirm(false)">
85          No
86        </button>
87      </div>
88    </div>
89  </teleport>
90</template>
91```
92 
93## Type Declarations
94 
95```ts
96export type UseConfirmDialogRevealResult<C, D> =
97  | {
98      data?: C
99      isCanceled: false
100    }
101  | {
102      data?: D
103      isCanceled: true
104    }
105export interface UseConfirmDialogReturn<RevealData, ConfirmData, CancelData> {
106  /**
107   * Revealing state
108   */
109  isRevealed: ComputedRef<boolean>
110  /**
111   * Opens the dialog.
112   * Create promise and return it. Triggers `onReveal` hook.
113   */
114  reveal: (
115    data?: RevealData,
116  ) => Promise<UseConfirmDialogRevealResult<ConfirmData, CancelData>>
117  /**
118   * Confirms and closes the dialog. Triggers a callback inside `onConfirm` hook.
119   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `false` value.
120   * Can accept any data and to pass it to `onConfirm` hook.
121   */
122  confirm: (data?: ConfirmData) => void
123  /**
124   * Cancels and closes the dialog. Triggers a callback inside `onCancel` hook.
125   * Resolves promise from `reveal()` with `data` and `isCanceled` ref with `true` value.
126   * Can accept any data and to pass it to `onCancel` hook.
127   */
128  cancel: (data?: CancelData) => void
129  /**
130   * Event Hook to be triggered right before dialog creating.
131   */
132  onReveal: EventHookOn<RevealData>
133  /**
134   * Event Hook to be called on `confirm()`.
135   * Gets data object from `confirm` function.
136   */
137  onConfirm: EventHookOn<ConfirmData>
138  /**
139   * Event Hook to be called on `cancel()`.
140   * Gets data object from `cancel` function.
141   */
142  onCancel: EventHookOn<CancelData>
143}
144/**
145 * Hooks for creating confirm dialogs. Useful for modal windows, popups and logins.
146 *
147 * @see https://vueuse.org/useConfirmDialog/
148 * @param revealed `boolean` `ref` that handles a modal window
149 *
150 * @__NO_SIDE_EFFECTS__
151 */
152export declare function useConfirmDialog<
153  RevealData = any,
154  ConfirmData = any,
155  CancelData = any,
156>(
157  revealed?: ShallowRef<boolean>,
158): UseConfirmDialogReturn<RevealData, ConfirmData, CancelData>
159```
160