Vue Modal Router

#vue #modal #webdev

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)
            }
        ] 
    }
]

And initialize our application:

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

useModalRouter.init(router);

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

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

    export default {
        components: {WidgetContainerModal: container},
        name: "App"
    }
</script>