DEV Community

loading...
Cover image for Vue3 ConfirmDialog

Vue3 ConfirmDialog

PrimeTek
PrimeTek is a world renowned vendor of popular UI Component suites including PrimeFaces, PrimeNG, PrimeReact and PrimeVue. For any inquires please use contact@primetek.com.tr to contact us.
・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Import

import ConfirmDialog from 'primevue/confirmdialog';
Enter fullscreen mode Exit fullscreen mode

 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>
Enter fullscreen mode Exit fullscreen mode
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
                }
            });
        },
    }
}
Enter fullscreen mode Exit fullscreen mode

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
            }
        });
    }
})
Enter fullscreen mode Exit fullscreen mode

Close Confirmation

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

export default {
    methods: {
        discard() {
            this.$confirm.close();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app