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.
Top comments (2)
I read the full article - it's fine. I will try to use your best practices in the future.
thnx, man!!