Link

GitHub
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.
    • 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.

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>
  <PLink as="button">Link</PLink>
</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>
  <PLink to="/docs/pohon/components/link">Link</PLink>
</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.

Link
<template>
  <PLink raw to="/docs/pohon/components/link" active-class="font-bold" inactive-class="text-muted">Link</PLink>
</template>

API

Props

Prop Default Type
as'button'any

The element or component this component should render as when not a link.

type'button'"button" | "reset" | "submit"

The type of the button when not a link.

ariaCurrentValue'page'"step" | "time" | "date" | "true" | "false" | "page" | "location"

Value passed to the attribute aria-current when the link is exact active.

autofocusfalse | true | "true" | "false"
formstring
formactionstring
formenctypestring
formmethodstring
formnovalidatefalse | true | "true" | "false"
formtargetstring
namestring
referrerpolicy"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
hrefstring | kt | Tt

An alias for to. If used with to, href will be ignored

targetstring & {} | "_blank" | "_parent" | "_self" | "_top"

Where to display the linked URL, as the name for a browsing context.

relstring & {} | "noopener" | "noreferrer" | "nofollow" | "sponsored" | "ugc"

A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.

tostring | kt | Tt

Route Location the link should navigate to when clicked on.

activeClassstring

Class to apply when the link is active

exactActiveClassstring

Class to apply when the link is exact active

downloadany
hreflangstring
mediastring
pingstring
exactQueryboolean | "partial"

Allows controlling how the current route query sets the link as active.

inactiveClassstring

The class to apply when the link is inactive.

prefetchedClassstring

A class to apply to links that have been prefetched.

prefetchOn"visibility" | "interaction" | Partial<{ visibility: boolean; interaction: boolean; }>

Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.

trailingSlash"append" | "remove"

An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.

activeundefinedboolean

Force the link to be active independent of the current route.

disabledboolean
replaceboolean

Calls router.replace instead of router.push.

viewTransitionboolean

Pass the returned promise of router.push() to document.startViewTransition() if supported.

exactboolean

Will only be active if the current route is an exact match.

exactHashboolean

Will only be active if the current route hash is an exact match.

rawboolean

When true, only styles from class, activeClass, and inactiveClass will be applied.

externalboolean

Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases

noRelboolean

If set to true, no rel attribute will be added to the link

prefetchboolean

When enabled will prefetch middleware, layouts and payloads of links in the viewport.

noPrefetchboolean

Escape hatch to disable prefetch attribute.

This component also supports all native <a> HTML attributes.

Slots

Slot Type
default{ active: boolean; }

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PLink. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts
export default defineAppConfig({
  pohon: {
    link: {
      base: '',
      variants: {
        active: {
          true: '',
          false: ''
        },
        disabled: {
          true: ''
        }
      },
      compoundVariants: []
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    link: {
      base: '',
      variants: {
        active: {
          true: '',
          false: ''
        },
        disabled: {
          true: ''
        }
      },
      compoundVariants: []
    }
  }
};

Changelog

No recent changes

FooterColumns

A list of links as columns to display in your Footer.

NavigationMenu

A list of links that can be displayed horizontally or vertically.