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

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>

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