ConfirmDialog

ConfirmDialog uses a Dialog UI that is integrated with the Confirmation API.

Download #


npx volt-vue add ConfirmDialog

Import #


import ConfirmDialog from '@/volt/ConfirmDialog.vue';

Service #

ConfirmDialog is controlled via the ConfirmationService that needs to be installed as an application plugin.


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

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

Recommended location of a Toast is the main application template so that the component can be accessed in a shared manner.


<template>
    <ConfirmDialog />
</template>

The useConfirm composable is used to interact with the component.


<script setup lang="ts">
import { useConfirm } from "primevue/useconfirm";

const confirm = useConfirm();
</script>

Basic #

ConfirmDialog is displayed by calling the require method of the $confirm instance by passing the options to customize the Dialog.


<template>
    <div class="card flex justify-center">
        <Button @click="confirmSave()" label="Save" />
    </div>
</template>

<script setup lang="ts">
import Button from '@/volt/Button.vue';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';

const confirm = useConfirm();
const toast = useToast();

const confirmSave = () => {
    confirm.require({
        message: 'Are you sure you want to proceed?',
        header: 'Confirmation',
        rejectProps: {
            label: 'Cancel',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: 'Confirm'
        },
        accept: () => {
            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
        }
    });
};
</script>

Headless #

Volt ConfirmDialog utilizes the PrimeVue ConfirmDialog in headless mode, as a result you have full control over the presentation. In order to customize the default UI modify the container template in confirmdialog/index.vue. The default UI is displayed below.


<template #container="{ message, acceptCallback, rejectCallback }">
    <div class="flex items-center justify-between shrink-0 p-5">
        <span class="font-semibold text-xl">{{ message.header }}</span>
        <SecondaryButton variant="text" rounded @click="rejectCallback" autofocus>
            <template #icon>
                <TimesIcon />
            </template>
        </SecondaryButton>
    </div>
    <div class="overflow-y-auto pt-0 px-5 pb-5 flex items-center gap-4">
        <ExclamationTriange class="size-6" />
        {{ message.message }}
    </div>
    <div class="pt-0 px-5 pb-5 flex justify-end gap-2">
        <SecondaryButton @click="rejectCallback" :label="message.rejectProps.label" size="small" />
        <Button @click="acceptCallback" :label="message.acceptProps.label" size="small" />
    </div>
</template>

Notice #

Key distinctions to notice between the Volt Dialog and the PrimeVue Dialog.

The position prop is not utilized in Volt, only available position is the center.
The Volt ConfirmDialog is based on the Headless PrimeVue ConfirmDialog so you'll be responsible for implementing the passed confirmation api properties such as message, header.