vue3-confirm-modal

Advanced reusable Confirm Modal plugin/component for Vue 3 with Tailwind CSS.

• Customizable titles, messages, icons, buttons
• Supports slots for icon, message, extra content, footer
• Background blur + disables outside clicks
• Keyboard accessible (Enter/Escape) and focus trapped
• Promise-based global $confirm() API

Installation

npm install vue3-confirm-modal
# or
yarn add vue3-confirm-modal

Usage

1. Register globally in your Vue app

import { createApp } from 'vue'
import App from './App.vue'
import ConfirmPlugin from 'vue3-confirm-modal'

const app = createApp(App)
app.use(ConfirmPlugin)
app.mount('#app')

2. Use $confirm() in any component

export default {
  methods: {
    async deleteItem() {
      const confirmed = await this.$confirm({
        title: 'Delete Item?',
        message: 'Are you sure you want to delete this? This action cannot be undone.',
        confirmText: 'Delete',
        cancelText: 'Cancel',
        icon: 'error', // options: info, success, warning, error
      })

      if (confirmed) {
        // proceed with deletion
        console.log('Item deleted')
      } else {
        console.log('Deletion cancelled')
      }
    }
  }
}

Slots Support (Advanced)

You can pass custom content for icon, message, extra area, and footer buttons.

Example (in setup script):

import { h } from 'vue'

this.$confirm({
  title: 'Custom Confirm',
  slots: {
    icon: () => h('svg', { class: 'w-8 h-8 text-purple-600', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
      h('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 4v16m8-8H4' }),
    ]),
    message: () => h('p', { class: 'text-purple-800' }, 'This is a fully custom message with <strong>HTML</strong>.'),
    extra: () => h('div', { class: 'mt-2 text-sm text-gray-500' }, 'Extra warning or info can go here.'),
    footer: () => h('div', { class: 'flex justify-between' }, [
      h('button', { class: 'btn border-gray-300', onClick: () => /* cancel logic */ {} }, 'No, go back'),
      h('button', { class: 'btn btn-primary', onClick: () => /* confirm logic */ {} }, 'Yes, proceed'),
    ]),
  }
})

Props Summary

Prop	Type	Default	Description
title	String	'Confirm'	Dialog title
message	String	'Are you sure?'	Main confirmation message
confirmText	String	'OK'	Confirm button label
cancelText	String	'Cancel'	Cancel button label
icon	String	'info'	Icon type: 'info', 'success', 'warning', 'error'

License

MIT © Ahamed Riham