Link

Un wrapper autour de NuxtLink avec des accessoires supplémentaires.

Utilisation

Le composant Link est un wrapper autour de <NuxtLink> en utilisant la prop. xph002.

inactive-class prop pour définir une classe quand le lien est inactif, active-class est utilisé quand il est actif.
exact prop à style avec active-class lorsque le lien est actif et que l'itinéraire est exactement le même que l'itinéraire actuel. Les props - exact-query et exact-hash sont stylisés avec active-class lorsque le lien est actif et que la requête ou le hachage est exactement le même que la requête ou le hachage en cours.
- utilise exact-query="partial" pour styliser avec active-class lorsque le lien est actif et que la requête correspond partiellement à la requête actuelle.

L'intérêt de cette approche est de fournir la même API que NuxtLink dans Nuxt 2/Vue 2. Vous pouvez en savoir plus à ce sujet dans le guide Vue Router migration de Vue 2.

Il est utilisé par les composants Breadcrumb, Button, ContextMenu, DropdownMenu et [xNavigationMenu/docs/components/navigation-menu).

Télécharger

Le composant Link rend une balise <a> lorsqu 'un prop to est fourni, sinon il rend une balise <button>.

<template>
  <ULink as="button">Link</ULink>
</template>

Vous pouvez inspecter le HTML rendu en changeant la prop. to.

Style

Par défaut, le lien a des styles actifs et inactifs par défaut, consultez la section #theme.

Link

<template>
  <ULink to="/docs/components/link">Link</ULink>
</template>

Essayez de changer le prop to pour voir les états actif et inactif.

Vous pouvez remplacer ce comportement en utilisant la prop raw et fournir vos propres styles en utilisant class, active-class et inactive-class.

activeClass

inactiveClass

Lien

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

Si vous utilisez l'extension Tailwind CSS IntelliSense pour VSCode et que vous souhaitez obtenir la complétion automatique pour les props active-class et inactive-class, vous pouvez ajouter les paramètres suivants à votre .vscode/settings.json:

.vscode/settings.json

{
  "tailwindCSS.classAttributes": [
    "active-class",
    "inactive-class"
  ]
}

Locale: badge{label="4.7+" class="align-text-top"}

Le composant Link s'intègre automatiquement avec @nuxtjs/i18n lorsqu 'il est installé. Les liens internes sont automatiquement localisés à l'aide de l'assistant $localePath sans nécessiter d'emballage manuel.

<template>
  <!-- Automatically becomes /en/about or /fr/about based on current locale -->
  <ULink to="/about">About</ULink>
</template>

Vous pouvez toujours utiliser manuellement localePath() ou localeRoute() si nécessaire.

En savoir plus sur l'internationalisation dans Nuxt UI.

API

Props équipements

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.
`raw`		`boolean` When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied.
`locale`	`undefined`	`string \| false \| true` Control i18n auto-localization when `@nuxtjs/i18n` is installed. `undefined` / `true` (default): auto-localizes to the current locale using `$localePath`. Paths already carrying a locale prefix (from e.g. `switchLocalePath()`) are detected and left untouched to prevent double-prefixing. `false`: explicitly disables auto-localization. `string`: localizes to a specific locale (e.g. `'fr'`).
`to`		`string \| it \| et` Route Location the link should navigate to when clicked on.
`href`		`string \| it \| et` 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`		`"remove" \| "append"` 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`

Ce composant prend également en charge tous les attributs HTML natifs <a>.

Slots

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

Thème

app.config.ts

export default defineAppConfig({
  ui: {
    link: {
      base: 'outline-primary/25 focus-visible:outline-3 rounded-md',
      variants: {
        active: {
          true: 'text-primary',
          false: 'text-muted'
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        }
      },
      compoundVariants: [
        {
          active: false,
          disabled: false,
          class: [
            'hover:text-default',
            'transition-colors'
          ]
        }
      ]
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        link: {
          base: 'outline-primary/25 focus-visible:outline-3 rounded-md',
          variants: {
            active: {
              true: 'text-primary',
              false: 'text-muted'
            },
            disabled: {
              true: 'cursor-not-allowed opacity-75'
            }
          },
          compoundVariants: [
            {
              active: false,
              disabled: false,
              class: [
                'hover:text-default',
                'transition-colors'
              ]
            }
          ]
        }
      }
    })
  ]
})

Changelog écrit

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.