DEV Community

Cover image for Vue Modal Router
Архипцев Евгений
Архипцев Евгений

Posted on

Vue Modal Router

The full article can be read here.

One of the popular questions on the official Discrod channel of the Vue community is the integration of modal windows and vue-router. In our team, we often use modal windows.
At the time of writing this article, we have 27 modal components. And a couple of years ago we faced the problem of displaying a modal window at a certain level.

Everything I wrote was programmed and put into a separate library jenesius-vue-modal.

Now let's figure out what we're doing. The main task: when the user switches to /user/5, display the modal window of the user card.

First of all, let's update the routes configuration file:

import {useModalRouter} from "jenesius-vue-modal";
const routes = [
        path: "/users",
        component: WidgetUserList,
        children: [
                path: ":id",
                component: useModalRouter(ModalUserCard)
Enter fullscreen mode Exit fullscreen mode

And initialize our application:

const routes = [...];
const router = createRouter({
    history: createWebHistory(), // Or any other

Enter fullscreen mode Exit fullscreen mode

Now it remains in the App file.vue insert a container that will display our modal windows.

    // Your HTML
    <widget-container-modal />
    import {container} from "jenesius-vue-modal";

    export default {
        components: {WidgetContainerModal: container},
        name: "App"
Enter fullscreen mode Exit fullscreen mode

Everything works. Also, all this can be viewed on Sandbox.

Top comments (2)

eda_student profile image

I read the full article - it's fine. I will try to use your best practices in the future.

jenesius profile image
Архипцев Евгений

thnx, man!!