Link

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.

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>

Style

By default, the link has default active and inactive styles, check out the #theme section.

<template>
  <PLink to="/docs/pohon/components/link">Link</PLink>
</template>

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

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

API

Props

Slots

Theme

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

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