A customized PrimeVue confirmation dialog component

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 visible property.

Example:

<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 <ConfirmDialog to <script setup>.


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”.

GitHub

View Github