Here is the following steps through that you can use Simple Confirm Dialog verification plugin with Vue.js

Install
$ npm install --save vue-confirm-dialog
Quick Start Usage
In main.js or plugin (for Nuxt.js):
import Vue from 'vue' import VueConfirmDialog from 'vue-confirm-dialog' Vue.use(VueConfirmDialog) Vue.component('vue-confirm-dialog', VueConfirmDialog.default)
In App.vue (or in the template file for Nuxt.js (layout/default.vue)):
<template> <div id="app"> <vue-confirm-dialog></vue-confirm-dialog> <!-- your code --> </div> </template> <script> export default { name: 'app' } </script>
In any of functions :
methods: { handleClick(){ this.$confirm( { message: `Are you sure?`, button: { no: 'No', yes: 'Yes' }, /** * Callback Function * @param {Boolean} confirm */ callback: confirm => { if (confirm) { // ... do something } } } ) } }
If you want to use in *.js file (e.g Vuex Store) before import Vue and after use Vue.$confirm
import Vue from 'vue' export default { namespaced: true, state: {}, actions: { logout({ commit }) { Vue.$confirm({ title: 'Are you sure?', message: 'Are you sure you want to logout?', button: { yes: 'Yes', no: 'Cancel' }, callback: confirm => { // ...do something } }) } } }
API
If you want to password confirm, “auth” key is must be true.
this.$confirm({ auth: true, message: 'foo', button: { yes: 'Yes', no: 'Cancel' }, /** * Callback Function * @param {Boolean} confirm * @param {String} password */ callback: (confirm, password) => { if (confirm && password == YOUR_PASSWORD) { // ...do something } } })