Menu
Documentation
v4.0.0-beta.4

Link

<BaseLink /> · An internal or an external link.

View SourceOpen Issue
Iam a link to Google
vue
<template>
  <BaseLink to="https://www.google.com" target="_blank" rel="noopener">
    Iam a link to Google
  </BaseLink>
</template>

Features

  • Creates a quickly styled link
  • Works with other typography clusters
  • Inherits NuxtLink props

Anatomy

This component accepts any content as a child. You can customize the button's visual style by using the available props.

vue
<template>
  <BaseLink>
    <!-- Content goes here -->
  </BaseLink>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
custom
default:-
false

Whether RouterLink should not wrap its content in an `a` tag. Useful when using `v-slot` to create a custom RouterLink

to
default:-
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

Route Location the link should navigate to when clicked on.

href
default:-
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

An alias for `to`. If used with `to`, `href` will be ignored

external
default:-
boolean

Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases

target
default:-
"_blank" | "_parent" | "_self" | "_top" | (string & {}) | null

Where to display the linked URL, as the name for a browsing context.

rel
default:-
(string & {}) | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc" | null

A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.

no-rel
default:-
boolean

If set to true, no rel attribute will be added to the link

prefetched-class
default:-
string

A class to apply to links that have been prefetched.

prefetch
default:-
boolean

When enabled will prefetch middleware, layouts and payloads of links in the viewport.

prefetch-on
default:-
"visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }>

Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.

no-prefetch
default:-
boolean

Escape hatch to disable `prefetch` attribute.

active-class
default:-
string

Class to apply when the link is active

exact-active-class
default:-
string

Class to apply when the link is exact active

aria-current-value
default:-
"time" | "step" | "true" | "false" | "page" | "location" | "date"

Value passed to the attribute `aria-current` when the link is exact active.

view-transition
default:-
boolean

Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.

replace
default:-
boolean

Calls `router.replace` instead of `router.push`.

Slot Type
#default
{}

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Link color */
  --color-link: var(--color-primary-base);
}

Kbd

List