Render a NuxtLink but with superpowers.
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.
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.
Example:
<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.
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"
],
}
string
"button"
"_blank" | "_parent" | "_self" | "_top" | (string & {})
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
string
string
"time" | "page" | "step" | "location" | "date" | "true" | "false"
string
string
"button"
boolean | "partial"
false
string
undefined
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
any
boolean
boolean
boolean
boolean
boolean
boolean
null
boolean
undefined
boolean
false
boolean
false