@vuecs/link

@vuecs/link

<VCLink> — one anchor for every routing setup, part of vuecs. Detects the environment and renders <NuxtLink>, <RouterLink>, or a plain <a> — so library components (and your own) never hard-code a router.

✨ What's inside

• 🧭 Auto-detection — Nuxt → <NuxtLink>, vue-router → <RouterLink>, neither → <a>. No configuration, no direct router dependency.
• 🔗 to or href — route location object/string for router navigation, href for plain anchors; query merging included.
• 🚦 Stateful props — active and disabled flow into rendering and clicks; clicked emit for selection-style flows (used by @vuecs/navigation's url-less section switchers).
• ⚡ Prefetch control — :prefetch forwarded to <NuxtLink> (default true).

📦 Installation

npm install @vuecs/link

⚡ Usage

<VCLink to="/dashboard">Dashboard</VCLink>
<VCLink href="https://github.com/tada5hi/vuecs" target="_blank">GitHub</VCLink>
<VCLink :to="{ name: 'user', params: { id } }" :disabled="!canVisit">Profile</VCLink>
<VCLink to="/password" :query="{ ref: '/account' }">Change password</VCLink>

Threading a link descriptor through your own data? Type it with LinkProps — derived from the component's prop declaration, so it can't drift, and free of an index signature, so misspelled props are compile errors:

import type { LinkProps } from '@vuecs/link';

const link: LinkProps = { to: '/password', query: { ref: '/account' } };

📚 Documentation

Full reference: vuecs.dev/components/link

License

Made with 💚

Published under Apache 2.0 License.