Skip to content

Instantly share code, notes, and snippets.

Last active March 23, 2024 08:48
Show Gist options
  • Save eolant/ba0f8a5c9135d1a146e1db575276177d to your computer and use it in GitHub Desktop.
Save eolant/ba0f8a5c9135d1a146e1db575276177d to your computer and use it in GitHub Desktop.
Vuetify Confirm Dialog component that can be used locally or globally
<v-dialog v-model="dialog" :max-width="options.width" :style="{ zIndex: options.zIndex }" @keydown.esc="cancel">
<v-toolbar dark :color="options.color" dense flat>
<v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
<v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
<v-card-actions class="pt-0">
<v-btn color="primary darken-1" text @click.native="agree">Yes</v-btn>
<v-btn color="grey" text @click.native="cancel">Cancel</v-btn>
* Vuetify Confirm Dialog component
* Insert component where you want to use it:
* <confirm ref="confirm"></confirm>
* Call it:
* this.$'Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
* Or use await:
* if (await this.$'Delete', 'Are you sure?', { color: 'red' })) {
* // yes
* }
* else {
* // cancel
* }
* Alternatively you can place it in main App component and access it globally via this.$root.$confirm
* <template>
* <v-app>
* ...
* <confirm ref="confirm"></confirm>
* </v-app>
* </template>
* mounted() {
* this.$root.$confirm = this.$
* }
export default {
data: () => ({
dialog: false,
resolve: null,
reject: null,
message: null,
title: null,
options: {
color: 'primary',
width: 290,
zIndex: 200
methods: {
open(title, message, options) {
this.dialog = true
this.title = title
this.message = message
this.options = Object.assign(this.options, options)
return new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
agree() {
this.dialog = false
cancel() {
this.dialog = false
Copy link

jtgasper3 commented Sep 5, 2021

Standing on the shoulders of the giants before me, I was able to get a global confirmation function working with Nuxt.js:

  1. In the layout component where the dialog is place:

    <app-confirmation-dialog ref="confirm" />
      //because I'm using Class based components I used an `@Ref()` shorthand, but using $refs in the RH side of the assignment below should work too:
      readonly confirm!: AppConfirmationDialog
      // the real magic??
       mounted(): void {
        this.$nuxt.$root.$confirm =
  2. Its usage in other components:

    await this.$root.$confirm(
            'Skip Day',
            'Are you sure you want to toggle the Skip Day status?',
              color: 'red',
  3. Most likely because I am using Typescript I had to add a Nuxt plugin with:

    import { Options } from '@/types'
    declare module 'vue/types/vue' {
      interface Vue {
        $confirm(title: string, message: string, options: Options): Promise<boolean>
  4. and I had a type defined in a file shared between the plugin and the other components:

    export interface Options {
      color?: string
      width?: number
      zIndex?: number

Copy link

Why use @click.native when @click seems to do the trick? Is there any scenario when a simple @click is not enough?

Copy link

If you need to implement it on vue3+vuetify3, you can refer to this article

Copy link

mepanko91 commented Feb 22, 2024


Add this function inside confirm dialog component so it will resolve with false if dialog is closed by clicking outside

function atDialogUpdate(val) {
  if (!val) {

Copy link

pkhuji commented Mar 23, 2024

If using in multiple places then confirmDialog component can be placed in root #app component like this

<div id='#app'>
  <confirmDialog :ref='store.setConfirmDialogRef' />

then in pinia store or any shared state

state: () => ({
  confirmDialogRef: null,
actions: {
  setConfirmDialogRef(val) {
    this.confirmDialogRef = val;

The store.setConfirmDialogRef method will update ref in store.
then in any function

async function submit() {
  if (!await
    "You sure?",
  )) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment