Vue 3 Modals That'll Have You Popping with Joy

Are you tired of overengineering simple things like showing a modal or a dialog? Look no further! I present to you… drumroll… Type Safe, Promise Based, Vue 3 Modals That’ll Have You Popping with Joy!

If you’re still reading, then you must be interested, or you just like reading long titles. Either way, I’ve got you covered.

You can see the youtube video below and click the stackblitz link for a short demo. But if you really want to experience the actual Dev UX of using this, then download and run this in VSCode.

Youtube Link (click image)

In the past, I overengineered modals like a mad scientist, but after attending a Vilnius.js meetup and seeing a talk by Gediminas Ubartas on how they implemented modals in their company, I decided to simplify my approach.

The result? Simply amazing. TypeSafe, Promise Based, Modals/Dialogs simply by providing a component to the showModal function in the useModalsProvider.ts file. Plus, the types ensure that you’ll never have to worry about runtime errors again. Return types from the showModal show you what to expect. The props argument makes sure that you provide everything the Modal Component requires to work!

But that’s not all, folks! There are extra things you can add to improve Client Side UX. I’ve done these extra things in my codebase, but they are very much based on what you prefer and how you prefer to do it. If you want to see these in a post, let me know in the comments.

So there you have it. Type Safe, Promise Based, Vue 3 Modals That’ll Have You Popping with Joy! Don’t take my word for it, try it out for yourself. And remember, always keep it simple, my friend.