Confirmation dialogs should be used to require user consent for a specific action. Dialogs should explain the reprecussions of performing a specific action, for example you can explain that a certain action that can not be undone and require user approval before proceeding.
Confirmations can be invoked anywhere in your component using $confirm() plugin or from your template using v-confirm directive (directive is not global, so you will need to inject it into your component). Confirmations use promises.
this.$confirm({
// Title of the dialog popup
title: 'Dangerous Action',
// Message of the dialog
message: 'If you proceed, something really really bad my befall on you',
// Type of the dialog popup
// This can be used to style the popup further, by default all dialogs are styled as neutral
type: 'neutral',
// Dialog size
size: 'medium',
// Props to the pass to <n-button> used to render the confirm button
confirmButton: {
text: 'I am feeling lucky',
color: 'danger',
},
// Props to pass to the <n-button> used to render the cancel button
cancelButton: {
text: 'Keep me safe',
outlined: true,
},
}).then(() => {
// User has granted their consent
}).catch(() => {
// User has cancelled the action
})
this.$confirm('You are about to do something bad', 'Danger')
.then(() => {})
.catch(() => {});
$confirm() Plugin Examplev-confirm Directive Example