vue3-confirm-dialog

Vue.js 3 version of Onur Aslan's Simple Confirm Dialog verification plugin

Plug-and-play confirmation plugin for Vue 3 and Vuex 4, written in the new Conditional API.

• 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.

Install

1$ npm install --save @zapadale/vue3-confirm-dialog

Quick Start Usage

In app.js:

1import Vue3ConfirmDialog from '@zapadale/vue3-confirm-dialog'
2
3const app = createApp(); // use your app name
4app.use(Vue3ConfirmDialog);
5

Component is installed automatically by the plugin, you dont need to add it manually.

In App.vue:

1<template>
2  <div id="app">
3    <vue3-confirm-dialog/>
4    <!-- your code -->
5  </div>
6</template>
7
8<script>
9  export default {
10    name: 'app'
11  }
12</script>

I recommend creating a app-wide notification component for handling all confirmations

Vue Options API:

1methods: {
2    handleClick(){
3      this.$confirm(
4        {
5          title: 'Confirm your action',
6          message: 'Are you sure?',
7          disableKeys: false,
8          auth: false,
9          button: {
10            no: 'No',
11            yes: 'Yes'
12          },
13          /**
14          * Callback Function
15          * @param {Boolean} confirm
16          */
17          callback: confirm => {
18            if (confirm) {
19              // ... do something
20            }
21          }
22        }
23      )
24    }
25  }

Vue Composition API / Vuex files / other *.js:

Beware: Composition API does not have "this"

Direct confirm import for Vuex

Can be used in Vue files as well

1import { confirm } from '@zapadale/vue3-confirm-dialog'
2
3export default {
4  namespaced: true,
5  state: {},
6  actions: {
7    logout({ commit }) {
8      confirm({
9        title: 'Confirm your action',
10          message: 'Are you sure?',
11          disableKeys: false,
12          auth: false,
13          button: {
14            no: 'No',
15            yes: 'Yes'
16          },
17          /**
18          * Callback Function
19          * @param {Boolean} confirm
20          * @param {String} password //if auth:true
21          */
22          callback: (confirm, password) => {
23            //if auth:true
24            if (confirm && password == YOUR_PASSWORD) {
25                // ...do something
26            }
27          }
28       })
29    }
30  }
31}

Inject function for Vue files

The plugin automatically sets global provide() with key "vue3-confirm-dialog".

1<script setup>
2import { inject } from 'vue'
3
4const confirm = inject('@zapadale/vue3-confirm-dialog');
5
6function test() {
7  confirm(
8        {
9          title: 'Confirm your action',
10          message: 'Are you sure?',
11          disableKeys: false,
12          auth: false,
13          button: {
14            no: 'No',
15            yes: 'Yes'
16          },
17          /**
18          * Callback Function
19          * @param {Boolean} confirm
20          */
21          callback: confirm => {
22            if (confirm) {
23              console.log('Works');
24            }
25          }
26        }
27      )
28})
29
30</script>

API

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"

1this.$confirm({
2    title: 'Confirm your action',
3    message: 'Are you sure?',
4    disableKeys: false,
5    auth: false,
6    button: {
7        no: 'No',
8        yes: 'Yes'
9    },
10    /**
11     * Callback Function
12     * @param {Boolean} confirm
13     * @param {String} password //if auth:true
14    */
15    callback: (confirm, password) => {
16        //if auth:true
17        if (confirm && password == YOUR_PASSWORD) {
18        // ...do something
19        }
20    }
21});

Use only for information

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

1methods: {
2    handleClick(){
3      this.$confirm(
4        {
5          title: 'Information',
6          message: 'This content has been removed',
7          disableKeys: false,
8          auth: false,
9          button: {
10          	no: 'OK',
11          }
12        },
13        /**
14        * Callback Function
15        * @param {Boolean} confirm
16        */
17        callback: confirm => {
18          if (confirm) {
19            // ... do something
20          }
21        }
22      )
23    }
24  }

Issues/improvements

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!