vue-confirm-gold

Vue Confirm Dialog

Overview

It's basic and flexible. The default style is dark themed and not fancy.

A CSS override mechanism is available.

Have fun!

Install

npm install vue-confirm-gold

Vue component <template> section:

<!-- 
required props:
  heading: string
  functionNo: Function
  functionYes: Function

optional props:
  item?: Record<string, any>
  text?: string
  details?: string
  buttonsText?: { yes: string, no: string }
  containerClassName?: string
-->
<ConfirmDialog
  v-if="showConfirmDialog"
  heading="Delete Item?"
  text="Really want to delete this?"
  :item="Item"
  :details="Item.name"
  :functionNo="confirmNoHandler"
  :functionYes="confirmYesHandler"
  :buttonsText="{ yes: 'Delete', no: 'cancel' }"
  containerClassName="custom-css"
/>

<button @click="spawnConfirmDialogBox">Select me</button>

Vue component <script setup> section:

import { ref } from 'vue'
import ConfirmDialog from 'vue-confirm-gold'

// Variable can be named anything so long as it's
// referenced in the ConfirmDialog's v-if attribute.
const showConfirmDialog = ref(false)

// function is referenced in button's @click attribute
const spawnConfirmDialogBox = () => {
  showConfirmDialog.value = true
}

// function executes when Yes button is selected
const confirmYesHandler = () => {
  showConfirmDialog.value = false
}

// function executes when No button is selected
const confirmNoHandler = () => {
  showConfirmDialog.value = false
}

Custom CSS:

The confirm dialog has basic default settings, but an override mechanism is available. The following example should help.

In the <template> above, custom-css value is the prop value for the containerClassName attribute.

In your common, global CSS, you can use the following example to override the default styles. Change values to suit your design goals.

/*********************************************************
Top Level Selector

".confirm-container-defaults" is reqired to increase
specificity of your custom CSS selector.

Append '.custom-css' which is defined in the ConfirmDialog.

(Some values below are based on Stylus syntax, not standard
CSS syntax.)
**********************************************************/
.confirm-container-defaults.custom-css {
  background: blue - 85%;
  border: 1px solid $blue-400;
  border-radius: 5px;
  max-width: 300px;
  padding: 10px;

  .heading {
    color: $blue-300;
  }

  .text {
    color: $blue-400;
  }

  .details {
    color: $blue-400;
  }

  .button-group-container {
    float: right;

    button {
      border: 1px solid gold - 30%;
      border-radius: 3px;

      &.yes,
      &.no {
        background: transparent;
        color: gold - 10%;

        &:hover {
          color: gold;
        }
      }
    }
  }
}

Credits

Gerry Gold

September 2026