Routing

@basmilius/routing extends vue-router with first-class modal routing. It re-exports every vue-router symbol and replaces the small surface that needs modal awareness — createRouter, RouterView, RouterLink — plus a handful of composables that smooth over the differences between background and modal routes.

Why a wrapper

Modal routing usually means routing twice in parallel: a background page that stays visible while a modal sits on top, plus a modal route the URL points at. @basmilius/routing keeps both in sync with history.state so refreshes survive, deep links work, and <Transition> plays.

Concretely, the package adds:

• A patched createRouter that injects modal state into navigations and exposes a shared modal context.
• A modal-aware RouterView. Add modals to the instance that should host the modal layer and render the rest of the tree as background.
• A RouterLink that supports modal (true or a depth number) so links can open as modals without bespoke handlers.
• A ModalRouterView for use inside wrapper components that need their own animated child view.
• Composables (useRoute, useNavigate, useModalRoute, useNamedRoute and friends) that always do the right thing inside background, modal and provider subtrees.

Quick example

// router.ts
import { createRouter } from '@basmilius/routing';
import { createWebHistory } from 'vue-router';
import OverlayWrapper from './layout/OverlayWrapper.vue';

export const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('./pages/Home.vue')
        },
        {
            path: '/users/:id',
            component: () => import('./pages/User.vue'),
            meta: {
                modal: { component: OverlayWrapper }
            }
        }
    ],
    defaultModal: { component: OverlayWrapper }
});

<!-- App.vue -->
<template>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink :to="{ path: '/users/42' }" modal>Open user</RouterLink>

    <RouterView modals/>
</template>

<script
    setup
    lang="ts">
    import { RouterLink, RouterView } from '@basmilius/routing';
</script>

Where to next

• Follow the Modal routing guide for a complete walkthrough.
• Read the Slot props reference for ModalWrapperProps.
• Browse the components, composables and types.

Related packages

• @basmilius/common ships useDtoForm plus a small router helper module. @basmilius/routing is the main package — common only carries thin helpers that depend on the routing primitives documented here.