The VuetifyDialogPromise plugin provides a Promise API for Vuetify dialogs and snackbar notifications. Provides the following instance methods:
$alert( message ).then( result => handler ) Raise a modal alert$confirm( message ).then( result => handler ).catch( reject => {} ); Raise a modal confirmation dialogue$prompt( message ).then( result => handler ).catch( reject => {} ); Raise a modal prompt for an input$inform( message ) Raise a notification in the "info" colour$warn( message ) Raise a notification in the "warn" colour$error( message ) Raise a notification in the "error" colourOn the command line:
npm install vuetify-dialog-promise
In your Vue app:
import DialogPromise from 'vuetify-dialog-promise';
Vue.use( DialogPromise, {
locale : "en",
acceptText : "My Default OK",
cancelText : "My Default Cancel",
closeText : "My Default Close",
snackbarX : "left",
snackbarY : "bottom",
snackbarTimeout : 1000,
dialogMaxWidth : 450
} );
All options have defaults.
To use from your components, for example:
/**
* With a plain text message
*/
this.$prompt( "What is your favourite colour?" ).then( colour =>
{
this.$inform( "The colour is " + colour + "." );
} );
/**
* With custom properties
*/
this.$prompt( {
title : "Important question:",
text : "What is your favourite colour?",
dialogMaxWidth : 600,
acceptText : "This",
cancelText : "Won't say"
} ).then( color =>
{
this.$warn( {
text : "The color is " + color + ".",
color : color,
closeText : "Yeah!",
timeout : 0
} );
} );