vue3-confirm-dialog-box

Simple Confirm Dialog verification plugin with Vue 3.

Demo: https://github.com/anilshr25/vue3-confirm-dialog-box

Install

1npm install --save vue3-confirm-dialog-box

Quick Start Usage

In main.js or plugin (for Nuxt.js):

1import { createApp } from "vue";
2import Vue3ConfirmDialogBox from "vue3-confirm-dialog-box";
3
4const app = createApp();
5
6app.use(Vue3ConfirmDialogBox);
7app.component("vue3-confirm-dialog-box", Vue3ConfirmDialogBox.default);

In App.vue (or in the template file for Nuxt.js (layout/default.vue)):

1<template>
2  <div id="app">
3    <vue3-confirm-dialog-box></vue3-confirm-dialog-box>
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          button: {
8            no: "No",
9            yes: "Yes"
10          },
11          /**
12          * Callback Function
13          * @param {Boolean} confirm
14          */
15          callback: confirm => {
16            if (confirm) {
17                console.log("Works");
18            }
19          }
20        }
21      )
22    }
23  }

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: (any) = inject("vue3-confirm-dialog-box");
5
6function handleClick() {
7  confirm(
8        {
9          title: "Confirm your action",
10          message: "Are you sure?",
11          button: {
12            no: "No",
13            yes: "Yes"
14          },
15          /**
16          * Callback Function
17          * @param {Boolean} confirm
18          */
19          callback: (confirm: boolean) => {
20            if (confirm) {
21              console.log('Works');
22            }
23          },
24        }
25      )
26};
27
28</script>