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
}
});
},
}
}
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};
}
})
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. |
| 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. |
| 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. |
None.