Vue3 ConfirmDialog

Vue3 ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Mitt EventBus

ConfirmDialog requires Mitt, a tiny 200b EventBus implementation.

npm install mitt --save

ConfirmationService

ConfirmDialog is controlled via the ConfirmationService that needs to be installed globally before the application instance is created.

import {createApp} from 'vue';
import ConfirmationService from 'primevue/confirmationservice';

const app = createApp(App);
app.use(ConfirmationService);

Import

import ConfirmDialog from 'primevue/confirmdialog';

Getting Started

ConfirmDialog is displayed by calling the require method of the $confirm instance by passing the options to customize the Dialog. Suggested location of the Dialog is the main application component where it can be shared by any component within the application.

<ConfirmDialog></ConfirmDialog>

<Button @click="delete()" icon="pi pi-check" label="Confirm"></Button>

export default {
    methods: {
        delete() {
            this.$confirm.require({
                message: 'Are you sure you want to proceed?',
                header: 'Confirmation',
                icon: 'pi pi-exclamation-triangle',
                accept: () => {
                    //callback to execute when user confirms the action
                },
                reject: () => {
                    //callback to execute when user rejects the action
                }
            });
        },
    }
}

Composition API

The service can be injected with the useConfirm function.

import { defineComponent } from "vue";
import { useConfirm } from "primevue/useconfirm";

export default defineComponent({
    setup() {
        const confirm = useConfirm();
        confirm.require({
            message: 'Are you sure you want to proceed?',
            header: 'Confirmation',
            icon: 'pi pi-exclamation-triangle',
            accept: () => {
                //callback to execute when user confirms the action
            },
            reject: () => {
                //callback to execute when user rejects the action
            }
        });
    }
})

Close Confirmation

The dialog can also be hidden programmatically using the close method.

export default {
    methods: {
        discard() {
            this.$confirm.close();
        }
    }
}

Theming

ConfirmDialog supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue ConfirmDialog showcase for demos and documentation.