Search⌘ K
AI Features
Home
Courses
Vue - The Road to Enterprise

Route Controlled Panel Modals

Explore how to create route-controlled panel modals in Vue 3 that slide in without losing the current page context. Understand using nested routes to manage modals, animations with the transition component, and handling product details with seamless navigation. This lesson helps you maintain state and enhance user experience by linking modals directly to routes.

We'll cover the following...

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. ...

Dart
// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import PanelModalExample from "@/views/panelModalExample/PanelModalExample.vue"; 
import ViewProductPanel from "@/views/panelModalExample/views/ViewProductPanel.vue";
const routes = [ 
  {
    path: "/panel-modal-example",
    name: "PanelModalExample",
    component: PanelModalExample,
    children: [
      {
        path: ":id",
        name: "ViewProductPanel",
        component: ViewProductPanel,
      }, 
    ],
  }, 
];
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL), 
    routes,
});
export default router;
...