BankaiLink
A router-aware link primitive. With no wiring it renders a native <a>; under vue-router or Nuxt it resolves the globally-registered RouterLink / NuxtLink for internal to navigation — so one component works across plain Vue, vue-router, and Nuxt.
Example
Router integration
Resolution order is NuxtLink → RouterLink → native <a>, detected from the app's globally-registered components — so core needs no dependency on vue-router. Override the internal-link component with config.linkComponent. For first-class vue-router typing of to, add @bankai-vue/core/vue-router to your tsconfig types. A target="_blank" link gets rel="noopener noreferrer" automatically (opt out via config.linkNoopener). An href to a different host reflects data-bankai-external; set config.linkOrigin to your site origin so that check is accurate under SSR/SSG.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
external | boolean | false | Force a plain <a> even when to is set and a router is available — e.g. to leave the SPA for a full-page navigation. Also marks the link external via data-bankai-external (independent of the router path), so it works alongside either to or href. A full-page navigation needs a URL, so pair external with a string to (or an href); an object to has none and renders a dead <a> (warns in dev). |
to | RouteLocationRaw | string | object | — | Internal navigation target, handed to the resolved router link (NuxtLink, else RouterLink). When no router is installed, a string to degrades to a plain <a :href>; an object to needs a router (there is nothing sensible to put in href without one). An object to with no router to resolve it — including when external forces a plain <a> — renders a destination-less anchor and warns in dev; pass a string to/href, or install a router. Its type is a router-agnostic fallback by default and vue-router's RouteLocationRaw once the @bankai-vue/core/vue-router types augmentation is active — see BankaiLinkTo. |
href | string | — | Explicit anchor target. Always renders a native <a href>, never a router link — use it for external URLs, mailto:/tel:, fragments, and downloads. |
Emits
This component emits no events.
Slots
| Slot | Description |
|---|---|
default | Link content — the label, and optionally an icon. |
Exposes
This component exposes nothing on its instance.
Theming
Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.
| Token | Default | Purpose |
|---|---|---|
--bankai-link-color | var(--bankai-color-accent) | Link color. |
--bankai-link-color-hover | color-mix(in oklch, var(--bankai-link-color), black 15%) | Link color on hover. |
--bankai-link-color-active | color-mix(in oklch, var(--bankai-link-color), black 25%) | Link color while pressed. |
--bankai-link-decoration | underline | Text decoration in the resting state. |
--bankai-link-decoration-hover | underline | Text decoration on hover. |
--bankai-link-underline-offset | 0.15em | Distance of the underline from the text. |
--bankai-link-cursor | pointer | Cursor over the link. |
--bankai-link-transition | color 150ms ease, text-decoration-color 150ms ease | Transition applied to color and underline changes. |
--bankai-link-focus-ring | var(--bankai-focus-ring) | Color of the focus-visible outline. |
--bankai-link-focus-outline-width | 2px | Width of the focus-visible outline. |
--bankai-link-focus-outline-offset | 2px | Offset of the focus-visible outline. |
--bankai-link-focus-radius | var(--bankai-radius) | Corner radius of the focus-visible outline. |