Skip to main content

​
Overview

The Link component provides navigation with automatic handling of internal routes and external URLs. It integrates with Vue Router and Nuxt’s router.

​
Basic usage

<template>
  <ULink to="/about">About</ULink>
</template>

<template>
  <ULink href="https://nuxt.com" target="_blank">
    Visit Nuxt
  </ULink>
</template>

​
With icon

<template>
  <ULink to="/docs" icon="i-lucide-book-open">
    Documentation
  </ULink>
</template>

​
As button style

<template>
  <ULink to="/signup" variant="solid" color="primary">
    Get Started
  </ULink>
</template>

​
Props

​
to
string | RouteLocationRaw
Internal route location (Vue Router).
​
href
string
External URL or internal path.
​
target
string
Link target attribute.
​
rel
string
Link rel attribute. Auto-set to noopener noreferrer for external links.
​
icon
string
Icon to display with the link.
​
inactive
boolean
Disable active state styling.
​
exact
boolean
Only apply active state for exact matches.

Build docs developers (and LLMs) love

Get started for freeTalk to us