Handle dialogs with promises in Vue 3

Show & Tell
#1

Hello !

Some of you may be aware of this Vue 2 project : vue-modal-dialogs . Unfortunately, it has never been ported to Vue 3. So I created a small Vue 3 package that reproduces its basic functionality : vue3-promise-dialog.

The basic idea is to use the same API to request data from the user (dialog) as to request data from the server (fetch) : async functions and promises.

So for example to ask the user to confirm something, you might do this :

if (await confirm("Are you sure ?")) {
    // Do something
}

Or to prompt the user for a text, you might do this :

let text = await prompText("Enter some text");
// Do something with the text

DEMO

I hope you enjoy this small project :slight_smile:

#2

I reworked the project to make it Typescript friendly. The API has changed so I completely rewrote the docs : docs.

I should emphasize that this project doesn’t provide any ready to use dialogs. Rather, it is a small framework that makes it easy to define your own dialogs and work with them using promises.

Enjoy !

#3

A Vite + Vue 3 + Typescript project on StackBlitz that shows how to define a minimalistic confirm dialog :

A minimalistic confirm dialog

image

#4

Hi @rlemaigre
Your project is beneficial. It’s helpful for many learners.