Modern Promise Dialog Library For Vue 3 & Vue 2

A tiny, modern, promise dialog library for Vue that works with asynchronous functions.

How to use it:

1. Import the Promise Dialog component.

import { createPromiseDialog } from “vue-promise-dialogs”

2. Create a basic promise dialog.

const BooleanDialog = Vue.extend({
  template: `
    <div class="dialog">
        <p>{{ params.text }}</p>
        <button name="true" @click="$emit('resolve', true)">True</button>
        <button name="false" @click="$emit('resolve', false)">False</button>
        <button name="cancel" @click="$emit('reject', 'cancel')">Cancel</button>
  props: {
      params: {
          type: Object,
          required: true,
// First type argument is the type of params prop that will be passed to component
// Second type argument is the type of value with which the promise will be fulfilled
const openDialog = createPromiseDialog<{ text: string }, boolean>(BooleanDialog);
// When you call this function, dialog will be mounted to `PromiseDialogsWrapper`.
// When user press any button and resolve/reject event emitted, promise will be settled and dialog will be destroyed.
const result: boolean = await openDialog({ text: 'Some text' });


Modern Promise Dialog Library For Vue



  • v2.0.0: rewrite with vue-demi; support vue 3


  • v1.3.3: use object instead of Map to store dialogs data; improve tree-shaking by moving closeAll logic from PromiseDialogsWrapper


  • v1.3.2: update


  • v1.3.1: add default dialog unmount delay prop for PromiseDialogsWrapper


  • v1.2.0: add a way to force close and reject all dialogs


  • v1.1.0: add a way to delay dialog unmount


  • v1.0.2: Bug Fixes

Download Details:

Author: Djaler

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-promise-dialogs

One Response

  1. Régis Lemaigre January 29, 2022

Add Comment