Packages

Appearance

RouterLink ​

Drop-in replacement for vue-router's RouterLink. Adds a modal prop so links can open the target route as a modal without bespoke click handlers.

Importing ​

ts
import { RouterLink } from '@basmilius/routing';

Usage ​

vue
<template>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink :to="{ path: '/users/42' }" modal>Open user (modal)</RouterLink>
    <RouterLink :to="{ path: '/users/42' }" :modal="1">Open user with parent layout (modal)</RouterLink>
</template>

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

Props

to: string | RouteLocationRaw
The target route. Same shape as vue-router's RouterLink.

replace?: boolean
Replace the current history entry instead of pushing a new one.
Default: false

activeClass?: string
Class applied to the rendered anchor when the route is active.
Default: 'router-link-active'

exactActiveClass?: string
Class applied to the rendered anchor when the route is exactly active.
Default: 'router-link-exact-active'

ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'
Value used for aria-current when the link is exactly active.
Default: 'page'

custom?: boolean
Render only the slot content; the component does not emit its own anchor.
Default: false

modal?: boolean | number
Open the target route as a modal. true / 0 opens the deepest record only; a positive number N includes N parent records.
Default: false

Slots

default ({
    readonly href: string;
    readonly route: RouteLocation;
    navigate(event?: MouseEvent) => Promise<void>;
    readonly isActive: boolean;
    readonly isExactActive: boolean;
})
Slot props are href, route, navigate, isActive and isExactActive.

modal is forwarded to router.push (or router.replace when replace is also set) as RouteLocationOptions.modal:

  • false (default) — vanilla navigation.
  • true / 0 — open as a modal, render only the deepest matched record.
  • <number> — open as a modal, include <number> parent records above the deepest one.

Modifier-clicks (cmd, ctrl, alt, shift, middle-click) skip the modal handling so that the URL still opens in a new tab. Modal routes must therefore be valid stand-alone URLs.

Custom rendering ​

Set custom to opt out of the default <a> rendering and render arbitrary children using the slot props:

vue
<RouterLink
    v-slot="{ href, navigate, isActive }"
    :to="{ name: 'edit' }"
    custom>
    <button
        :class="{ active: isActive }"
        :data-href="href"
        @click="navigate">
        Edit
    </button>
</RouterLink>

See also ​