Handling Dialogs with Vue Router

In the first part of this little series on Vue Router Architecture I wrote about handling nested routes with Vue Router. It would maybe easier to follow if you have read that already, but here is a very short summary:
That tutorial introduced an EmptyRouterView component for handling the nested routes.
But we can also use this component for handling dialogs like this one:

By handling the visibility of dialogs with vue router we can easily toggle them by navigating to the corresponding urls. And in my opinion this results in a more clean codebase. So how do we do it?

Step 1: Update our EmptyRouterView Component

First we need to edit our EmptyRouterView component: