DEV Community

Daniel Kelly
Daniel Kelly

Posted on

Renderless Dialogs (Alert, Confirm, and Prompt) in Vue

Javascript has a few handy functions used to interrupt the users workflow and warn them of something or get feedback from them. Those functions are alert(), prompt(), and confirm(). While these functions are very easy to use they come with a few drawbacks:

  1. They cannot be styled
  2. They look different across different browsers
  3. They can only contain plain text
  4. The prompt can only accept text input (no checkbox, selects, etc)
  5. You can't customize the button text

While I really like the ease of use these functions provide, I don't like working within the restraints put on them. Therefore, today we're going to build a "renderless dialog" object that will mimic the behavior of alert(), prompt(), and confirm().

Read the rest at https://danielkelly.io/blog/renderless-vue-dialog

Top comments (3)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Hey
This looks like a good post here. Can you share this in full on DEV?

DEV generally asks that folks share their posts in full if possible and there is tooling provided (dev.to/settings/publishing-from-rss) to make it so that it's relatively easy to repost from outside blogs.

Hope you'll consider sharing the full post going forward.

Collapse
 
danielkellyio profile image
Daniel Kelly

Ah, I wasn't aware of that. I'll share full post content going forward with links to the blog post so that users have access to the demos, examples, etc. I definitely want to follow the wishes of DEV as they've provided a great community for us devs to share a wealth of information. And thanks for the info about the publishing from rss. That'll be super helpful! Thanks!

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Useful yeah! Thanks and great day ! ☕