Vue Confirmation Modal

A Vue 3 plugin for easily integrating promise based confirmation modals into your application, with support for theme customization and global configuration.

Requirements

Vue version >=3.2.25

Installation

Install the package using npm:

npm install vue-confirmation-modal

Or using yarn:

yarn add vue-confirmation-modal

Setup

Add ConfirmationModal to your Vue application in your main entry file (typically main.ts or main.js):

import { createApp } from 'vue';
import App from './App.vue';
import ConfirmationModal from 'vue-confirmation-modal';
import 'vue-confirmation-modal/dist/style.css'; // import styles

const app = createApp(App);

app.use(ConfirmationModal, {
  // Global configuration options
  title: 'Are you sure?',
  animation: 'slideUp', // 'none' | 'slideUp' | 'slideDown' | 'roadRunner' | 'bounce'
  theme: 'auto' // 'auto' | 'light' | 'dark' (auto defaults to system preference)
});

app.mount('#app');

Usage

Use the confirmationModal object to display a modal. The show method returns a promise that resolves to true if the user confirms or false if the user rejects or closes the modal.

<script setup lang="ts">
  import { confirmationModal } from 'vue-confirmation-modal';

  const handleDelete = async () => {
    try {
      const confirmed = await confirmationModal.show({
        // these options will override default
        text: 'This action will permanently delete this record! Is it ok to proceed?',
        primaryBtnText: 'Confirm'
      });

      if (!confirmed) return;

      // your functionality goes here

      alert('Deleted successfully');
    } catch (error) {
      alert('Failed to delete');
    }
  };
</script>

<template>
  <main>
    <button @click="handleDelete">delete something</button>
  </main>
</template>

Options

You can customize the confirmation modal by providing options either globally (when adding the plugin to your app) or locally (when calling the show method). These are default options:

export const defaultOptions: Options = {
  title: 'Are you sure?',
  text: 'This action will permanently delete this record! Is it ok to proceed?',
  primaryBtnText: 'Confirm',
  theme: 'light',
  animation: 'slideUp'
};

Contributing

Contributions are welcome! Please open an issue or submit a pull request with any improvements or bug fixes.