// installation via npm npm i -S vuejs-dialog  // or  // installation via yarn yarn add vuejs-dialog

// then  // import into project import Vue from 'vue'; import VuejsDialog from 'vuejs-dialog'; import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components  // include the default style import 'vuejs-dialog/dist/vuejs-dialog.min.css';  // Tell Vue to install the plugin. Vue.use(VuejsDialog);

// If you're including via script tag and importing as Webpack external // Webpack config {     // ... other webpack config     externals: {         // .. other externals if any         'vuejs-dialog': 'VuejsDialog'     } }

// then  // import into project import Vue from 'vue'; import VuejsDialog from 'vuejs-dialog';  // Tell Vue to install the plugin. Vue.use(VuejsDialog.main.default);  // mixin available at: VuejsDialog.mixin.default

// Anywhere in your Vuejs App.  // Trigger an Alert dialog this.$dialog.alert('Request completed!').then(function(dialog) {   console.log('Closed'); });  // Trigger a confirmation dialog this.$dialog   .confirm('Please confirm to continue')   .then(function(dialog) {     console.log('Clicked on proceed');   })   .catch(function() {     console.log('Clicked on cancel');   });

// VuejsDialog Methods are also available on the global vue // This makes it possible to use the plugin inside a ReactJs application // or just any javascript application // Simply include vue, vuejs-dialog, ask vue to use the plugin and that's all:  Vue.dialog.alert('Request completed!').then(function(dialog) {   console.log('Closed'); });  Vue.dialog   .confirm('Please confirm to continue')   .then(function(dialog) {     console.log('Clicked on proceed');   })   .catch(function() {     console.log('Clicked on cancel');   });

// Whenever a user clicks on proceed, // the promise returned by the dialog call will be // resolved with a dialog object with the following shape:   {     close: function | sometimes | A method that can be used to close the dialog if it's in a loading state     loading: function | sometimes | A method that can be used to stop the dialog loader     node: DOMElement | sometimes | A DOM element which the directive was bound to, when triggered via a directive     data: any | always | Data sent with the positive action. Useful in prompts or custom components where you have multiple proceed buttons }  // Example:  <button class="btn-danger"         v-confirm="{             loader: true,             ok: okCallback,             cancel: cancelcallback,             message: 'Some confirmation message'}" >  okCallback: function (dialog) { 		dialog.loaging(false) // stop the loader (you won't be needing this) 		dialog.close() // stops loader and close the dialog 		dialog.node.className // === "btn-danger" 		dialog.data // === null }

this.$dialog   .prompt({     title: "Let's hear from you",     body: "What is the most important thing in life?",     promptHelp: 'Type in the box below and click "[+:okText]"'   })   .then(dialog => {     // Triggered when proceed button is clicked     // Show an alert with the user's input as the message     this.$dialog.alert(dialog.data || '[empty]')   })   .catch(() => {     // Triggered when dialog is dismissed by user      console.log('Prompt dismissed');   });

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');   });

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

methods: {     makeAdmin: function(dialog, user) {         // Make user admin from the backend         /* tellServerToMakeAdmin(user) */          // When completed, close the dialog         /* dialog.close() */      },     doNothing: function() {         // Do nothing or some other stuffs     } }

methods: {     makeAdmin: function(dialog) {         let button = dialog.node // node is only available if triggered via a directive         let user = button.dataset.user          // Make user admin from the backend         /* tellServerToMakeAdmin(user) */          // When completed, close the dialog         /* dialog.close() */      },     doNothing: function() {         // Do nothing or some other stuffs     } }

let message = {   title: 'Vuejs Dialog Plugin',   body: 'A lightweight, promise based alert, prompt and confirm dialog' };  this.$dialog.confirm(message);

// Parameters and options  let message = "Are you sure?";  let options = {     html: false, // set to true if your message contains HTML tags. eg: "Delete <b>Foo</b> ?"     loader: false, // set to true if you want the dailog to show a loader after click on "proceed"     reverse: false, // switch the button positions (left to right, and vise versa)     okText: 'Continue',     cancelText: 'Close',     animation: 'zoom', // Available: "zoom", "bounce", "fade"     type: 'basic', // coming soon: 'soft', 'hard'     verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button     verificationHelp: 'Type "[+:verification]" below to confirm', // Verification help text. [+:verification] will be matched with 'options.verification' (i.e 'Type "continue" below to confirm')     clicksCount: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding     backdropClose: false, // set to true to close the dialog when clicking outside of the dialog window, i.e. click landing on the mask     customClass: '' // Custom class to be injected into the parent node for the current dialog instance };  this.$dialog.confirm(message, options) 	.then(function () { 	    // This will be triggered when user clicks on proceed 	}) 	.catch(function () { 	    // This will be triggered when user clicks on cancel 	});

// You can also set all your defaults at the point of installation. // This will be your global configuration  // use VuejsDialog.main.default if including via script tag Vue.use(VuejsDialog, {   html: true,   loader: true,   okText: 'Proceed',   cancelText: 'Cancel',   animation: 'bounce' });  // Please note that local configurations will be considered before global configurations. // This gives you the flexibility of overriding the global config on individual call.

this.$dialog.confirm($message, {   verificationHelp: 'Enter "[+:verification]" below and click on "[+:okText]"',   type: 'hard' });

import Vue from 'vue'; import CustomView from './path/to/file/custom-component.vue';  const VIEW_NAME = 'my-unique-view-name'; Vue.dialog.registerComponent(VIEW_NAME, CustomView);  let vm = new Vue({   methods: {     showCustomView() {       // Note: Use confirm instead of alert if you need to handle rejection       this.$dialog.alert(trans('messages.html'), {         view: VIEW_NAME, // can be set globally too         html: true,         animation: 'fade',         backdropClose: true       });     }   } });