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 ConfirmPopup from 'primevue/confirmpopup';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/confirmpopup/confirmpopup.min.js"></script>
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
},
onShow: () => {
//callback to execute when popup is shown
},
onHide: () => {
//callback to execute when popup is hidden
}
});
},
}
}
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
},
onShow: () => {
//callback to execute when popup is shown
},
onHide: () => {
//callback to execute when popup is hidden
}
});
}
return {delete};
}
})
The popup can also be hidden programmatically using the close method.
export default {
methods: {
discard() {
this.$confirm.close();
}
}
}
Templating allows customizing the content where the message instance is available as the implicit variable.
<ConfirmPopup group="demo">
<template #message="slotProps">
<div class="flex p-4">
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
<p class="pl-2">{{slotProps.message.message}}</p>
</div>
</template>
</ConfirmPopup>
ConfirmDialog can be customized with various options listed here.
| Name | Type | Default | Description |
|---|---|---|---|
| target | DomElement | null | Element to align the overlay. |
| message | string | null | Message of the confirmation. |
| group | string | null | Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance. |
| icon | string | null | Icon to display next to the message. |
| accept | Function | null | Callback to execute when action is confirmed. |
| reject | Function | null | Callback to execute when action is rejected. |
| onShow | Function | null | Callback to execute when popup is shown. |
| onHide | Function | null | Callback to execute when popup is hidden. |
| acceptLabel | string | null | Label of the accept button. Defaults to PrimeVue |
| rejectLabel | string | null | Label of the reject button. Defaults to PrimeVue |
| acceptIcon | string | null | Icon of the accept button. |
| rejectIcon | string | null | Icon of the reject button. |
| acceptClass | string | null | Style class of the accept button. |
| rejectClass | string | null | Style class of the reject button. |
| defaultFocus | string | accept | Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject". |
| Name | Parameters | Description |
|---|---|---|
| require | confirm: Confirmation Object | Displays the dialog using the confirmation object options. |
| close | - | Hides the dialog without invoking accept or reject callbacks. |
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| group | string | null | Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance. |
| Name | Parameters |
|---|---|
| message | - |
ConfirmDialog inherits all the classes from the Dialog component, visit
| Name | Element |
|---|---|
| p-confirm-popup | Container element. |
| p-confirm-popup-content | Content element. |
| p-confirm-popup-icon | Message icon. |
| p-confirm-popup-message | Message text. |
| p-confirm-popup-footer | Footer element for buttons. |
ConfirmPopup component uses alertdialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition aria-modal is added since focus is kept within the popup.
When require method of the $confirm instance is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the dialog is defined.
<ConfirmPopup id="confirm" aria-label="popup" />
<Button @click="openPopup($event)" label="Confirm" id="confirmButton" :aria-expanded="isVisible" :aria-controls="isVisible ? 'confirm' : null" />
setup() {
const confirm = useConfirm();
const isVisible = ref(false);
const openPopup = (event) => {
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
header: 'Confirmation',
onShow: () => {
isVisible.value = true;
},
onHide: () => {
isVisible.value = false;
}
});
}
return {isVisible, openPopup};
}
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the popup. |
| shift + tab | Moves focus to the previous the focusable element within the popup. |
| escape | Closes the popup and moves focus to the trigger. |
| Key | Function |
|---|---|
| enter | Triggers the action, closes the popup and moves focus to the trigger. |
| space | Triggers the action, closes the popup and moves focus to the trigger. |
None.