Vuetify.js confirm dialog

This module extends vuetify confirm dialog.

Demo page

See the demo

Open the demo in Codesandbox

Setup

Install the package from npm

npm install vuetify-confirm

vuetify 2

Important: since vuetify2 you should put instance of vuetify into config

const vuetify = new Vuetify(...)
import VuetifyConfirm from 'vuetify-confirm'
Vue.use(VuetifyConfirm, { vuetify })

....

Installation in Nuxt

In nuxt create and register plugin plugins/dialog.js

import Vue from 'vue'
import VuetifyConfirm from 'vuetify-confirm'

export default ({ app }) => {
  Vue.use(VuetifyConfirm, { vuetify: app.vuetify })
}

vuetify 1

For vuetify 1 please use 0.2.6 version

Installation options

import VuetifyConfirm from 'vuetify-confirm'
Vue.use(VuetifyConfirm, {
  vuetify,
  buttonTrueText: 'Accept',
  buttonFalseText: 'Discard',
  buttonTrueColor: 'primary',
  buttonFalseColor: 'grey',
  buttonTrueFlat: false,
  buttonFalseFlat: true,
  color: 'warning',
  icon: 'warning',
  title: 'Warning',
  width: 350,
  property: '$confirm'
})

property: '$confirm' will create property with this name in Vue prototype

Params

• message: String, required
• options: Object
  • buttonTrueText: String, default: 'Yes'
  • buttonFalseText: String, default: 'No'
  • buttonTrueColor: String, default: 'primary'
  • buttonFalseColor: String, default: 'grey'
  • buttonTrueFlat: Boolean, default: true
  • buttonFalseFlat: Boolean, default: true
  • color: String
  • icon: String
  • title: String
  • width: Number
  • persistent: Boolean

Usage

this.$confirm('Do you really want to exit?').then(res => {
})

const res = await this.$confirm('Do you really want to exit?', { title: 'Warning' })
if (res) {
  ...
}

res will be true or false

You can format your message with arbitrary HTML - make sure you don't include any user-provided content here:

const res = await this.$confirm('Please do not do this.<br>Do you really want to exit?')
console.log(res)

Also you can press Enter or Esc keys for choose confirm result