Link

A wrapper around with extra props.

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.

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

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.

activeClass

inactiveClass

Link

{
  "wait": "Loading client-side content..."
}

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

isAction

Link

{
  "wait": "Loading client-side content..."
}

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

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.
`exact`		`boolean` Will only be active if the current route is an exact match.
`exactQuery`		`boolean \| "partial"` Allows controlling how the current route query sets the link as active.
`exactHash`		`boolean` Will only be active if the current route hash is an exact match.
`inactiveClass`		`string` The class to apply when the link is inactive.
`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.
`href`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` An alias for `to`. If used with `to`, `href` will be ignored
`external`		`boolean` Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
`target`		`null \| string & {} \| "_blank" \| "_parent" \| "_self" \| "_top"` Where to display the linked URL, as the name for a browsing context.
`rel`		`null \| "noopener" \| "noreferrer" \| "nofollow" \| "sponsored" \| "ugc" \| string & {}` A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
`noRel`		`boolean` If set to true, no rel attribute will be added to the link
`prefetchedClass`		`string` A class to apply to links that have been prefetched.
`prefetch`		`boolean` When enabled will prefetch middleware, layouts and payloads of links in the viewport.
`prefetchOn`		`"visibility" \| "interaction" \| Partial<{ visibility: boolean; interaction: boolean; }>` Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
`noPrefetch`		`boolean` Escape hatch to disable `prefetch` attribute.
`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.
`activeClass`		`string` Class to apply when the link is active
`exactActiveClass`		`string` Class to apply when the link is exact active
`ariaCurrentValue`	`'page'`	`"step" \| "page" \| "true" \| "false" \| "location" \| "date" \| "time"` Value passed to the attribute `aria-current` when the link is exact active.
`viewTransition`		`boolean` Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
`replace`		`boolean` Calls `router.replace` instead of `router.push`.
`name`		`string`
`autofocus`		`false \| true \| "true" \| "false"`
`form`		`string`
`formaction`		`string`
`formenctype`		`string`
`formmethod`		`string`
`formnovalidate`		`false \| true \| "true" \| "false"`
`formtarget`		`string`
`referrerpolicy`		`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`
`download`		`any`
`hreflang`		`string`
`media`		`string`
`ping`		`string`

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

Slots

Slot	Type
`default`	`{ active: boolean; }`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    link: {
      base: 'cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start',
      variants: {
        active: {
          true: 'text-(--ui-color-accent-main-primary) outline-(--ui-color-accent-main-primary) hover:not-disabled:not-aria-disabled:underline underline-offset-2',
          false: 'text-(--ui-color-design-selection-content) underline-offset-2'
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        },
        isAction: {
          true: 'text-nowrap text-(length:--ui-font-size-sm) h-auto py-0 font-(--ui-font-weight-normal) rounded-none border border-x-0 border-t-0 border-dashed text-(--ui-color-design-outline-a1-content) border-b-(--ui-color-design-outline-a1-content) hover:not-disabled:not-aria-disabled:no-underline hover:text(--ui-color-accent-soft-element-red) hover:not-disabled:not-aria-disabled:text-(--ui-color-accent-soft-element-red) hover:border-b-(--ui-color-accent-soft-element-red) focus-visible:outline-(--ui-color-accent-soft-element-red)'
        }
      },
      compoundVariants: [
        {
          active: false,
          disabled: false,
          class: 'hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline'
        }
      ]
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        link: {
          base: 'cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start',
          variants: {
            active: {
              true: 'text-(--ui-color-accent-main-primary) outline-(--ui-color-accent-main-primary) hover:not-disabled:not-aria-disabled:underline underline-offset-2',
              false: 'text-(--ui-color-design-selection-content) underline-offset-2'
            },
            disabled: {
              true: 'cursor-not-allowed opacity-75'
            },
            isAction: {
              true: 'text-nowrap text-(length:--ui-font-size-sm) h-auto py-0 font-(--ui-font-weight-normal) rounded-none border border-x-0 border-t-0 border-dashed text-(--ui-color-design-outline-a1-content) border-b-(--ui-color-design-outline-a1-content) hover:not-disabled:not-aria-disabled:no-underline hover:text(--ui-color-accent-soft-element-red) hover:not-disabled:not-aria-disabled:text-(--ui-color-accent-soft-element-red) hover:border-b-(--ui-color-accent-soft-element-red) focus-visible:outline-(--ui-color-accent-soft-element-red)'
            }
          },
          compoundVariants: [
            {
              active: false,
              disabled: false,
              class: 'hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline'
            }
          ]
        }
      }
    })
  ]
})

CommandPalette

A searchable command palette powered by Fuse.js for fast, fuzzy text search.

NavigationMenu

A link list that can be arranged in horizontal or vertical orientation.