Components

Link

A wrapper around with extra props.

Usage

The Link component is a wrapper around <NuxtLink> using the custom prop. It provides a few extra props:

inactive-class prop to set a class when the link is inactive, active-class is used when active.
exact prop to style with active-class when the link is active and the route is exactly the same as the current route.
exact-query and exact-hash props to style with active-class when the link is active and the query or hash is exactly the same as the current query or hash.

The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router migration from Vue 2 guide.

It is used by the Breadcrumb, Button, ContextMenu, DropdownMenu and NavigationMenu components.

Tag

The Link components renders an <a> tag when a to prop is provided, otherwise it renders a <button> tag. You can use the as prop to change fallback tag.

<template>
  <ULink as="button">Link</ULink>
</template>

You can inspect the rendered HTML by changing the to prop.

Style

By default, the link has default active and inactive styles, check out the #theme section.

Link

<template>
  <ULink to="/components/link">Link</ULink>
</template>

Try changing the to prop to see the active and inactive states.

You can override this behavior by using the raw prop and provide your own styles using class, active-class and inactive-class.

activeClass

inactiveClass

Link

<template>
  <ULink raw to="/components/link" active-class="font-bold" inactive-class="text-[var(--ui-text-muted)]">Link</ULink>
</template>

IntelliSense

If you're using VSCode and wish to get autocompletion for the classes active-class and inactive-class, you can add the following settings to your .vscode/settings.json:

.vscode/settings.json

{
  "tailwindCSS.classAttributes": [
    "active-class",
    "inactive-class"
  ]
}

API

Props

Prop	Default	Type
`as`	`"button"`	`any` The element or component this component should render as when not a link.
`type`	`"button"`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`disabled`		`boolean`
`active`	`undefined`	`boolean` Force the link to be active independent of the current route.
`exact`		`boolean` Will only be active if the current route is an exact match.
`exactQuery`		`boolean` Will only be active if the current route query is an exact match.
`exactHash`		`boolean` Will only be active if the current route hash is an exact match.
`inactiveClass`	`""`	`string` The class to apply when the link is inactive.
`raw`		`boolean` When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied.
`to`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` Route Location the link should navigate to when clicked on.
`href`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` An alias for `to`. If used with `to`, `href` will be ignored
`external`		`boolean` Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
`target`		`null \| "_blank" \| "_parent" \| "_self" \| "_top" \| string & {}` Where to display the linked URL, as the name for a browsing context.
`rel`		`null \| string & {} \| "noopener" \| "noreferrer" \| "nofollow" \| "sponsored" \| "ugc"` A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
`noRel`		`boolean` If set to true, no rel attribute will be added to the link
`prefetchedClass`		`string` A class to apply to links that have been prefetched.
`prefetch`		`boolean` When enabled will prefetch middleware, layouts and payloads of links in the viewport.
`prefetchOn`		`"visibility" \| "interaction" \| Partial<{ visibility: boolean; interaction: boolean; }>` Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
`noPrefetch`		`boolean` Escape hatch to disable `prefetch` attribute.
`activeClass`	`""`	`string` Class to apply when the link is active
`exactActiveClass`		`string` Class to apply when the link is exact active
`ariaCurrentValue`	`'page'`	`"true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` Value passed to the attribute `aria-current` when the link is exact active.
`replace`		`boolean` Calls `router.replace` instead of `router.push`.

Slots

Slot	Type
`default`	`{ active: boolean; }`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    link: {
      base: 'focus-visible:outline-[var(--ui-primary)]',
      variants: {
        active: {
          true: 'text-[var(--ui-primary)]',
          false: [
            'text-[var(--ui-text-muted)] hover:text-[var(--ui-text)]',
            'transition-colors'
          ]
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        }
      }
    }
  }
})

Keyboard Key

A kbd element to display a keyboard key.

Modal

A dialog window that can be used to display a message or request user input.