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