Nuxt UI Pro v1.0 is out with dashboard components!

Components

Link

Render a NuxtLink but with superpowers.

Usage

The Link component is a wrapper around <NuxtLink> through the custom prop that 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.

<template>
  <ULink
    to="/components/link"
    active-class="text-primary"
    inactive-class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
  >
    Link
  </ULink>
</template>

It also renders an <a> tag when a to prop is provided, otherwise it defaults to rendering a <button> tag. The default behavior can be customized using the as prop.

It is used underneath by the Button, Dropdown and VerticalNavigation components.

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"
  ],
}

Props

type
string
"button"
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
to
any
activeClass
string
exactActiveClass
string
ariaCurrentValue
"time" | "page" | "step" | "location" | "date" | "true" | "false"
prefetchedClass
string
as
string
"button"
inactiveClass
string
undefined
href
any
rel
any
replace
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
external
boolean
disabled
boolean
null
active
boolean
undefined
exact
boolean
false
exactQuery
boolean
false
exactHash
boolean
false