PrimeVue Confirmation Dialog
Vue 3 (Composition API, SFC,
<script setup>) + Typescript + Vite
A customized PrimeVue confirmation dialog component.
I needed a reusable ConfirmDialog component with preset properties but customizable message and options.
I previously had separate instances of the ConfirmDialog component for each type of dialog which would be toggled using
v-if or a toggle class using the
<template> <ConfirmationDialog :visible="editDialog" :message="Are you sure you want to Edit?" /> <ConfirmationDialog :visible="deleteDialog" :message="Are you sure you want to Delete?" /> </template>
This implementation made it easier to manage making
<template> less crowded by only needing a single instance of
<ConfirmDialog> and properties are moved from
At the time of this writing, the PrimeVue component puts initial focus on the “accept” button. I wanted “reject” to be the default so a user can’t accidentally press Enter to confirm a delete so I reversed “accept” and “reject”.