Vue.js 3 version of Onur Aslan's Simple Confirm Dialog verification plugin
- No custom template required - just load the plugin and use it right away.
- Custom Title, Message and Button names.
- Can be used as password input and confirmation window at the same time.
- Supports confirmation by pressing Enter and closing the window by pressing Escape. This functionality can be turned off.
$ npm install --save @zapadale/vue3-confirm-dialog
In app.js:
import Vue3ConfirmDialog from '@zapadale/vue3-confirm-dialog'
const app = createApp(); // use your app name
app.use(Vue3ConfirmDialog);
Component is installed automatically by the plugin, you dont need to add it manually.
In App.vue:
<template>
<div id="app">
<vue3-confirm-dialog/>
<!-- your code -->
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
I recommend creating a app-wide notification component for handling all confirmations
methods: {
handleClick(){
this.$confirm(
{
title: 'Confirm your action',
message: 'Are you sure?',
disableKeys: false,
auth: false,
button: {
no: 'No',
yes: 'Yes'
},
/**
* Callback Function
* @param {Boolean} confirm
*/
callback: confirm => {
if (confirm) {
// ... do something
}
}
}
)
}
}
Beware: Composition API does not have "this"
Can be used in Vue files as well
import { confirm } from '@zapadale/vue3-confirm-dialog'
export default {
namespaced: true,
state: {},
actions: {
logout({ commit }) {
confirm({
title: 'Confirm your action',
message: 'Are you sure?',
disableKeys: false,
auth: false,
button: {
no: 'No',
yes: 'Yes'
},
/**
* Callback Function
* @param {Boolean} confirm
* @param {String} password //if auth:true
*/
callback: (confirm, password) => {
//if auth:true
if (confirm && password == YOUR_PASSWORD) {
// ...do something
}
}
})
}
}
}
The plugin automatically sets global provide() with key "vue3-confirm-dialog".
<script setup>
import { inject } from 'vue'
const confirm = inject('@zapadale/vue3-confirm-dialog');
function test() {
confirm(
{
title: 'Confirm your action',
message: 'Are you sure?',
disableKeys: false,
auth: false,
button: {
no: 'No',
yes: 'Yes'
},
/**
* Callback Function
* @param {Boolean} confirm
*/
callback: confirm => {
if (confirm) {
console.log('Works');
}
}
}
)
})
</script>
If you want to password confirm, "auth" key is must be true. By default, you can confirm the dialog by pressing "enter" or deny by pressing "escape". To disable this functionality, set "disableKeys" to "true"
this.$confirm({
title: 'Confirm your action',
message: 'Are you sure?',
disableKeys: false,
auth: false,
button: {
no: 'No',
yes: 'Yes'
},
/**
* Callback Function
* @param {Boolean} confirm
* @param {String} password //if auth:true
*/
callback: (confirm, password) => {
//if auth:true
if (confirm && password == YOUR_PASSWORD) {
// ...do something
}
}
});
If you want to use only for information and you want of see one button in dialog, you can use only one of 'no' or 'yes' button object. Beware: clicking the single button still counts as clicking the YES/NO button. So, use "button:{no:'OK'}" if you want to just inform and not call the callback
methods: {
handleClick(){
this.$confirm(
{
title: 'Information',
message: 'This content has been removed',
disableKeys: false,
auth: false,
button: {
no: 'OK',
}
},
/**
* Callback Function
* @param {Boolean} confirm
*/
callback: confirm => {
if (confirm) {
// ... do something
}
}
)
}
}
Since I am a beginner at Vue 3/Vuex 4 it would be a great help to report any bugs/improvements you find. I am thrilled to fix/add them but I need to know about them. Thank you for your time!