Vue3 ConfirmPopup

Vue3 ConfirmPopup displays a confirmation overlay displayed relatively to its target. 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

ConfirmPopup 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 ConfirmPopup from 'primevue/confirmpopup';

Getting Started

ConfirmPopup is displayed by calling the require method of the $confirm instance by passing the options to customize the Popup. target attribute is mandatory to align the popup to its caller.

<ConfirmPopup></ConfirmPopup>

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

export default {
    methods: {
        delete(event) {
            this.$confirm.require({
                target: event.currentTarget,
                message: 'Are you sure you want to proceed?',
                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();

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

        return {delete};
    }
})

Close Confirmation

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

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

Theming

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

Resources

Visit the PrimeVue ConfirmPopup showcase for demos and documentation.