DEV Community


Discussion on: Handling Dialogs with Vue Router

berniwittmann profile image
Bernhard Wittmann Author

Ah I see. The whole idea of this approach is not to create a single MyDialogComponent that can be used in several locations, but to create several dialogs for different purposes. This ties the dialogs closer to the business logic if you will.

However you can control sone behavior via url parameters or some query string in the url.

Let’s use an example:
The goal is to create a dialog that pops up for confirmation after editing a form. This form can either trigger a create or an update request.
Therefore the dialog should display some text and a button Text depending on the action type. The confirm button will then either trigger a create or an update request.

The approach outlined in the article would propose two separate dialogs living in their own vue router routes eg /confirm/edit and /confirm/create (You can still avoid code duplication by using components)

You could still use one dialog, that would render content or do stuff conditionally depending on the url, but that would probably violate the single purpose idea

Let me know whether this could clarify things. If not I can also put together a code snippet. Just let me know

Thread Thread
jdhrnndz profile image

This made much more sense in relation to the business logic.

I'm actually using this approach for a reusable notification/error dialog, which, upon reading your reply, seems like not the best use case for this pattern. I may not use it right now, but I will definitely adapt this where it's appropriate. Thank you for taking the time to respond

Thread Thread
berniwittmann profile image
Bernhard Wittmann Author

Yes, in that case some more reusable dialog would probably by the way to go :)
Of course, such discussions are the key for this dev community and I'm glad to help