Route Controlled Panel Modals

Scenario

From time to time, we might want to display a modal in our application. Suppose a user is browsing through a list of products. When the product is clicked on, a panel modal could slide in and display more information about the product. Technically, we could just add a panel modal component and control its visibility using the v-if directive and a boolean flag. The problem with this approach is that if a user opens the product panel and then refreshes it, the panel will no longer be visible. Similarly, if a user visits the page with a modal through a specific URL, it also won’t be visible. This scenario could be handled by adding a query param to the URL like &productModalOpen=true, but we’d have to programmatically check for its existence and update the isOpenPanel flag accordingly. We can automate this if we associate a panel modal with a specific route.

Implementation

Let’s start with the routes config.

Note: If we want to follow this example from scratch, we can scaffold a new Vue 3 project. Otherwise, we can see this example in the Companion App.