vuejs-confirm-directive v1.0.4

Vue.js Confirm directive

A confirmation is always required on tasks which if a user takes, can have certain consequences. For example deleting a user, publishing an article and many such things. Creating a confirmation box to show a message and make the user aware is important.

This directive will help create a confirmation box for the user with a custom alert message and then allow to handle the action.

There exist a lot of components which gives you buttons but why should we restrict a user to a button. Can be any HTML element like image. And hence, this directive.

Installation

using NPM:

npm i vuejs-confirm-directive

using Yarn:

yarn add vuejs-confirm-directive

Usage

You can do a require in your main js and then use the directive anywhere in the application.

require('vuejs-confirm-directive');

Example 1 - get confirmation, send post data and reload page

<button v-confirm.reload="{
    link: 'your-url-comes-here',
    message: 'Your custom message comes here',
    data: {name: 'Custom directive', short: 'v-confirm'},
}"></button>

Example 2 - get confirmation, send post data and handle the callback

<button v-confirm="{
    link: 'your-url-comes-here',
    message: 'Your custom message comes here',
    data: {name: 'Custom directive', short: 'v-confirm'},
    callback: functionToHandleCallback
}"></button>

Example 3 - get confirmation, and do nothing

<button v-confirm="{
    link: 'your-url-comes-here',
    message: 'Your custom message comes here',
    data: {name: 'Custom directive', short: 'v-confirm'},
    callback: null
}"></button>

Options / attributes to send with the directive

Below is a list of attributes that you can send and what that does.

NOTE: When the reload modifier is not provided, a callback function is required. If, for any situation you don't want to handle the confirm of user (which I feel is a rare case) pass null or false to the callback property.