Vuetify3 Vue3 confirm dialog

This module extends vuetify3 confirm dialog.

Setup

Install the package from npm

1npm install vuetify3-confirm

1yarn add vuetify3-confirm

vuetify 3

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

1import vuetify from ***
2import confirm from "vuetify3-confirm"
3app.use(confirm,{vuetify})

....

Installation options

1import confirm from "vuetify3-confirm"
2app.use(confirm, {
3  vuetify,
4  buttonTrueText: 'Accept',
5  buttonFalseText: 'Discard',
6  buttonTrueColor: 'primary',
7  buttonFalseColor: 'grey',
8  buttonTrueFlat: false,
9  buttonFalseFlat: true,
10  color: 'warning',
11  icon: 'warning',
12  title: 'Warning',
13  width: 350,
14  property: '$confirm'
15})

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

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

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

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:

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

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