Link

A wrapper around NuxtLink with extra props.

Nuxt UI

Git

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.
  • use exact-query="partial" to style with active-class when the link is active and the query partially match the current query.

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.

INFO

It is used by the Button 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.

INFO

You can inspect the rendered HTML.

Details

<script setup lang="ts">
export interface ExampleProps {
  asTag?: string
}

withDefaults(defineProps<ExampleProps>(), {
  asTag: 'button'
})
</script>

<template>
  <B24Link :as="asTag" to="/b24ui/components/link.html">
    Link
  </B24Link>
  <B24Link :as="asTag">
    Link
  </B24Link>
</template>

Style

By default, the link has default active and inactive styles.

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

Details

<template>
  <B24Link
    to="b24ui/components/link.html"
    raw
    active
    active-class="font-bold text-ai-500"
    inactive-class="text-red-500"
  >
    Link (active)
  </B24Link>
  <B24Link
    to="wrong_path"
    raw
    active-class="font-bold text-ai-500"
    inactive-class="text-red-500"
  >
    Link (not active)
  </B24Link>
</template>

You can use the is-action prop to indicate a pseudo-link.

Details

<template>
  <B24Link is-action to="b24ui/components/link.html">
    Link action
  </B24Link>
  <B24Link is-action>
    Button action
  </B24Link>
</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:

{
  "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.
custom		boolean Whether RouterLink should not wrap its content in an `a` tag. Useful when using `v-slot` to create a custom RouterLink
isAction	false	boolean When `true`, uses special underlined styling.
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.
target		null | "_blank" | "_parent" | "_self" | "_top" | string & {} Where to display the linked URL as the name for a browsing context.
viewTransition		boolean Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.

Slots

Slot	Type
default	{ active: boolean; }