Usage

Basics

Build Modal Window. It must contain emits confirm and cancel.

ModalDialog.vue 
<script setup>
  const emit = defineEmits(['confirm', 'cancel'])
</script>
<template>
  <div>
    <!-- The modal component body -->
    <button @click="emit('confirm')">Confirm</button>
    <button @click="emit('cancel')">Cancel</button>
  </div>
</template>

Use this modal window wherever you want in your project:

App.vue
<script setup>
import ModalDialog from './ModalDialog.vue'
import { createConfirmDialog } from 'vuejs-confirm-dialog'
const { reveal, onConfirm, onCancel } = createConfirmDialog(ModalDialog)
reveal()
onConfirm(() => {
  console.log('Confirmed!')
})
onCancel(() => {
  console.log('Canceled!')
})
</script>

Two ways of usage

The package lets you decide how to use it. The first way is to use hooks:

  • onConfirm - hook gets a callback that runs after the user confirmed the modal message
  • onCancel - run callback if the user decides to click cancel

The second way is promisify modal dialog. reveal the function returns a Promise, that resolves data and isCanceled boolean from the dialog after the user commits the action.

For example:

App.vue
<script setup>
import ModalDialog from './ModalDialog.vue'
import { createConfirmDialog } from 'vuejs-confirm-dialog'
const dialog = createConfirmDialog(ModalDialog)
const confirmDelete = async () => {
  const { data, isCanceled } = await dialog.reveal()
  if(isCanceled) return
  
  deleteYourData(data)
}
</script>
Table of Contents