A lightweight prompt and confirm dialog

Vuejs Dialog Plugin

A lightweight, promise based alert, prompt and confirm dialog.

Installation

HTML

Include the script:

// Include vuejs
<script type="text/javascript" src="./path/to/vue.min.js"></script>

// Include the vuejs-dialog plugin
<script type="text/javascript" src="./path/to/vuejs-dialog.min.js"></script>

<script>
// Tell Vue to install the plugin.
window.Vue.use(VuejsDialog)
</script>

NPM

// installation via npm 
npm install vuejs-dialog

// import into project
import Vue from "vue"
import VuejsDialog from "vuejs-dialog"

// Tell Vue to install the plugin.
Vue.use(VuejsDialog)

Basic Usage

// Anywhere in your Vuejs App.

this.$dialog.confirm('Please confirm to continue')
	.then(function () {
		console.log('Clicked on proceed')
	})
	.catch(function () {
		console.log('Clicked on cancel')
	});

Usage with ajax - Loader enabled

// Anywhere in your Vuejs App.

this.$dialog.confirm("If you delete this record, it'll be gone forever.", {
    loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
    			// And a dialog object will be passed to the then() callback
})
	.then((dialog) => {
		// Triggered when proceed button is clicked

		// dialog.loading(false) // stops the proceed button's loader
		// dialog.loading(true) // starts the proceed button's loader again
		// dialog.close() // stops the loader and close the dialog

		// do some stuff like ajax request.
		setTimeout(() => {
			console.log('Delete action completed ');
			dialog.close();
		}, 2500);

	})
    .catch(() => {
        // Triggered when cancel button is clicked

        console.log('Delete aborted');
    });

Usage as a directive (new)

If you don't pass a message, the global/default message would be used.

<button type="submit" v-confirm="">submit</button>

// Callbacks can be provided
// Note: If "loader" is set to true, the makeAdmin callback will be passed a "dialog" object
// Which is useful for stoping the loader, or closing the dialog.
<button v-confirm="{ok: makeAdmin, cancel: doNothing, message: 'User will be given admin privileges. Make user an Admin?'}">Make Admin</button>

methods: {
    makeAdmin: function() {
        // Do stuffs
        
    },
    doNothing: function() {
        // Do nothing or some other stuffs
    }
}

For v-confirm directive, if an "OK" callback is not provided, the default event would be triggered.

// You can use it on links too
<a href="http://example.com" v-confirm="'This will take you to http://example.com. Proceed with caution'">Go to example.com</a>

Author

Godofbrowser

GitHub