useDialog - Vue.js snippets

THIS IS NOW OUTDATED

Please see the Type Safe, Promise Based, Vue 3 Modals That'll Have You Popping with Joy post on how to create, much nicer, typesafe and simpler modals in Vue 3

TL;DR;

Here's the link to the gist use/change/modify it.

Have you ever wanted a simple dialog, which is completely custom, but you didn't want to pull in a package.

But it always looks like a mess to make?

Well worry no more! In todays Vue.js snippets post we'll make just that! Don't believe me? Have a look at the finished result!

And this is the API for it:

If you like it here's the explanation on how to write one yourself.

The useDialog.js

The basic premise is, we want a nice api to use dialogs right?

Something that has an expresive api with autocompletion if possible. Something like:

Dialog.myCustomType()
.title('hello')
.onConfirm(() => { //do something })

This is a bit of a whopper of a class, but it's easy to write test for. I've written the basic api. You can change/modify this to your liking.

Thing to improve?

• Allow multiple onConfirm/onCancel callbacks Quite simple just change the onConfirmCallback to onConfirmCallbacks = [] And then on each call of onConfirm, just push the callback into the stack, and onResolve await all of the callbacks