ui/docs/content/3.components/link.md

description, links

description	links
A wrapper around <NuxtLink> with extra props.	label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Link.vue

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.

::note 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.

::component-code

props: to: '' as: 'button' slots: default: Link

::

::note 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.

::component-code

props: to: /components/link slots: default: Link

::

::note 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.

::component-code

ignore:

• raw props: raw: true to: /components/link activeClass: 'font-bold' inactiveClass: 'text-[--ui-text-muted]' slots: default: Link

---

Link ::

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:

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

API

Props

::component-props

ignore:

• custom

---

::

Slots

:component-slots

Theme

:component-theme