Modern Promise Dialog Library For Vue 3 & Vue 2

Install & Download:

# NPM
$ npm i vue-promise-dialogs

Description:

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>
    </div>
  `,
  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' });