@vuecs/link
Version:
A package containing a link component.
50 lines (33 loc) • 2.08 kB
Markdown
# @vuecs/link
[](https://www.npmjs.com/package/@vuecs/link)
[](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml)
[](./LICENSE)
**`<VCLink>` — one anchor for every routing setup**, part of [vuecs](https://github.com/tada5hi/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
```bash
npm install @vuecs/link
```
## ⚡ Usage
```vue
<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:
```ts
import type { LinkProps } from '@vuecs/link';
const link: LinkProps = { to: '/password', query: { ref: '/account' } };
```
## 📚 Documentation
Full reference: **[vuecs.dev/components/link](https://vuecs.dev/components/link)**
## License
Made with 💚
Published under [Apache 2.0 License](./LICENSE).