This module extends vuetify confirm dialog.
Install the package from npm
npm install vuetify-confirm
Important: since vuetify2 you should put instance of vuetify into config
const vuetify = new Vuetify(...)
import VuetifyConfirm from 'vuetify-confirm'
Vue.use(VuetifyConfirm, { vuetify })....
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 })
}For vuetify 1 please use 0.2.6 version
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
- 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
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent