vuejs-confirm-dialog

Convert your dialogs to async functions and use them all over your project!

This plugin just makes it simple to create, reuse, promisify and build chains of modal dialogs in Vue.js. It provides just one function createConfirmDialog that does all the hard work for you.

New documentation is ready! Try a new site that contains all the docs of the project! vcd-docs.netlify.app

About

How does it work? The idea is simple, this function -- createConfirmDialog gets a modal component and magically provides to it emits confirm and cancel and its props values. This function returns to you a dialog instance that controls the rendering of the modal component and reacts to user decisions. It reduces you to write all the boilerplate code over and over again and makes it simple to reuse your modals everywhere in your project.

You can work with dialogs like with promises or with hooks that the dialog instance generates for you.

Installation

in 3 steps

Step 0

Add the plugin to your node_modules

1npm i vuejs-confirm-dialog

Step 1 (optional)

Install the plugin:

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import * as ConfirmDialog from 'vuejs-confirm-dialog'
5
6createApp(App).use(ConfirmDialog).mount('#app')

Step 2

Add DialogsWrapper to App.vue template:

1<!-- App.vue -->
2<template>
3  <div class="app">
4  </div>
5
6  <!-- put it in the template of your App.vue file to make dialogs work -->
7  <!-- Don't need import the component, if you installed the plugin -->
8  <DialogsWrapper />
9</template>
10
11<script setup>
12// import wrapper manually, if you skiped step 1  
13import { DialogsWrapper } from 'vuejs-confirm-dialog'
14
15</script>

And that's it. Now you can use it.

Usage

Build Modal Window. It must contain emits confirm and cancel. It also must contain prop show. Put v-if="show" in its template for conditional rendering(no longer need to).

1<!-- ModalDialog.vue -->
2<script setup>
3  const emit = defineEmits(['confirm', 'cancel'])
4</script>
5
6<template>
7  <div>
8    <!-- The modal component body -->
9    <button @click="emit('confirm')">Confirm</button>
10    <button @click="emit('cancel')">Cancel</button>
11  </div>
12</template>

Use this modal window wherever you want in your project:

1<!-- App.vue -->
2<script setup>
3import ModalDialog from './ModalDialog.vue'
4import { createConfirmDialog } from 'vuejs-confirm-dialog'
5
6const { reveal, onConfirm, onCancel } = createConfirmDialog(ModalDialog)
7
8reveal()
9
10onConfirm(() => {
11  console.log('Confirmed!')
12})
13onCancel(() => {
14  console.log('Canceled!')
15})
16</script>

Two ways of usage

The plugin lets you decide how to use it. The first way is to use hooks:

• onConfirm - hook gets a callback that runs after the user confirmed the modal message
• onCancel - run callback if the user decides to click cancel

The second way is promisify modal dialog. reveal the function returns a Promise, that resolves data and isCanceled boolean from the dialog after the user commits the action.

for example(not real):

1<script setup>
2import ModalDialog from './ModalDialog.vue'
3import { createConfirmDialog } from 'vuejs-confirm-dialog'
4
5const dialog = createConfirmDialog(ModalDialog)
6
7const confirmDelete = async () => {
8  const { data, isCanceled } = await dialog.reveal()
9
10  if(isCanceled) return
11  
12  deleteYourData(data)
13}
14</script>

Passing data to/from the dialog

It will be not so useful if we will not have the option to pass data to and from а component. There are several ways to deal with it. First of all, you can pass data to the second argument of the createConfirmDialog function. Data must be an object with names of properties matching to props of the component you use as dialog. For example, if a component has a prop with the name title we have to pass this { title: 'Some Title' }. So these will be the initial props that the dialog component will receive.

You can change props values during the calling reveal function by passing to its object with props data. So you can call the reveal function several times with different props. This is an excellent way to reuse the same dialog in different situations.

And finally, you can pass data to emit functions inside your modal dialog component: confirm and cancel. Hooks onConfirm and onCancel will receive this data. Also, it will be passed by Promise, so you can use the async/await syntax if you prefer.

The full example, that displays passing data, reusing, and modal chains:

1<script setup>
2import LoginDialog from './LoginDialog.vue'
3import InfoModal from './InfoModal.vue'
4import { createConfirmDialog } from 'vuejs-confirm-dialog'
5import { ref } from 'vue'
6
7const loginDialog = createConfirmDialog(LoginDialog)
8const infoModal = createConfirmDialog(InfoModal, { title: 'Some Title' })
9
10const user = ref(null)
11
12const login = async () => {
13  const result = await infoModal.reveal({ title: 'Please log in to the system' })
14
15  if(!result.isCanceled) {
16    const { data, isCanceled } = await loginDialog.reveal()
17    if(!isCanceled) {
18      user.value = data
19
20      infoModal.reveal({ title: 'You have successfully logged in.' })
21    } else {
22      infoModal.reveal({ title: 'You were unable to log in and will not be able to access your data.' })
23    }
24  }
25}
26</script>

Props Behavior Options

Unfortunately, the way of passing props is not so clear to the developers. The problem occurs when you try to reuse a dialog instance already created with createConfirmDialog. See also the issue.

Let's consider this process step by step. Props values ​​are assigned three times, the first time is default props values, in the component, this plugin does not show up on them in any way. The second time occurs on creating an instance of the dialog, let's define these values ​​as initial props. The third time passing values ​​is possible when the user prompts the dialog using the reveal method. If you don't set the props behavior options, then each time you pass values, this data will be saved.

For example, if you have an alert component and you called it with the message "Authorization failed!", then next time if you don't pass a new message value, it will show this message again.

Perhaps it will be convenient if every time after closing the dialog, the values ​​of the props will be reset to the initial or even default values. For this functionality, props transfer settings have been added.

There are only two options:

• chore - if true will tell to function reset values after closing dialog
• keepInitial - if true reset props values to initial values, otherwise to default values of the component

The simplest example:

1  const dialog = createConfirmDialog(
2    ModalComponent,
3    { message: 'Some message...' }, // Initial props values
4    { chore: true, keepInitial: true }
5  )

Using inside Options API

If you prefer you can use it with Options API inside methods.

1import Dialog from './Dialog.vue'
2import { createConfirmDialog } from 'vuejs-confirm-dialog'
3
4export default {
5  data(){
6    return {
7      isConfirmed: false
8    }
9  },
10  methods: {
11    showDialog(){
12      const dialog = createConfirmDialog(Dialog)
13
14      dialog.onConfirm(() => {
15        this.isConfirmed = true
16      })
17
18      dialog.reveal()
19    }
20  }
21}

For more info check this full Vue 3 example.

Close dialogs programmable

Sometimes you need to close dialogs and don't want to wait for the user's action. For these purposes, dialog instance provides method close.

1import Alert from './Alert.vue'
2import { createConfirmDialog } from 'vuejs-confirm-dialog'
3
4const dialog = createConfirmDialog(Alert)
5
6dialog.reveal()
7
8setTimeout(() => {
9  dialog.close()
10}, 3000)

It also doesn't trigger any hooks.

If you need to close all dialog just call dialog.closeAll().

Demo

Clone the project, install dependencies and run the following command to see the demo:

1pnpm run demo

The demo is styled by beautiful daisyUI.

Roadmap

• Make it work!

• Make it work without show a prop

• TSDoc

• Change testing tools to Vitest

• Improve tests

• Improve docs( reuse, passing props ...)

• More examples

Thanks

Inspired by Vueuse and vue-modal-dialogs. Thanks to all creators of these projects ❤️!

Keep calm and support :ukraine:!