Page navigation
Use a styled native anchor to reach another route.
Components / Navigation
Link
A styled native anchor that preserves browser navigation behavior.
Preview
Install
Run in your project
npx @getweini/cli@latest add linkUse cases
External resource
Link to a separate site with clear destination text.
Usage example
Vue
<Link href="/reports">
View reports
</Link>More examples
Inline route
Use a descriptive label that still makes sense outside its paragraph.
Inline route
<script setup lang="ts">
import Link from './components/ui/link/Link.vue'
</script>
<template>
<p>Read the <Link href="/guides/export">export guide</Link> before downloading.</p>
</template>Quiet secondary link
A muted variant can sit beside a primary form action.
Quiet secondary link
<script setup lang="ts">
import Link from './components/ui/link/Link.vue'
</script>
<template>
<Link href="/account/help" variant="muted" size="sm">Need help signing in?</Link>
</template>Key API
The most useful props, models, slots, events, and methods for this component.
| Name | Type | Default or requirement |
|---|---|---|
href | string | required |
variant | default | muted | plain | default |
size | sm | md | lg | md |
Native anchor attributes and events pass through. Router integrations can provide href and navigation through their custom-link mode.
Implementation notes
- Use href for navigation; choose Button for an action that stays on the page.
- Native anchor attributes such as target and rel pass through.
Accessibility and localization
- Avoid vague text such as “click here”; describe the destination in the link text.