Link

NuxtLink 주변에 추가 소품이 있는 래퍼입니다.

Usage

Link 구성 요소는 custom prop을 사용하여 [<NuxtLink>xph04xhttps://nuxt.com/docs/api/components/nuxt-linkxph06x 주위의 래퍼로, 다음과 같은 몇 가지 추가 props를 제공합니다.

inactive-class prop은 링크가 비활성 상태일 때 클래스를 설정하고, 활성 상태일 때 active-class를 사용합니다.
exact prop은 링크가 활성화되어 있고 경로가 현재 경로와 정확히 동일할 때 active-class로 스타일을 지정합니다.
exact-query 및 exact-hash는 링크가 활성화되어 있고 쿼리 또는 해시가 현재 쿼리 또는 해시와 정확히 같을 때 active-class로 스타일을 지정하는 소품입니다.
- xexact-query="partial"를 사용하여 링크가 활성화되어 있고 쿼리가 현재 쿼리와 부분적으로 일치하는 경우 active-class를 사용하여 스타일을 지정합니다.

이에 대한 인센티브는 Nuxt 2/Vue 2에서 NuxtLink와 동일한 API를 제공하는 것입니다. Vue Router migration from Vue 2 가이드에서 자세히 읽을 수 있습니다.

이것은 Breadcrumb, Button, [ContextMenu](/docs/components/context-menu, [DropdownMenu) 및 [DropdownMenu``DropdownMenuxph04044x 구성 요소에 사용됩니다.

Tag 파일

Link 구성 요소는 to 소품이 제공될 때 <a> 태그를 렌더링하고, 그렇지 않으면 <button> 태그를 렌더링합니다. as 소품을 사용하여 폴백 태그를 변경할 수 있습니다.

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

to prop을 변경하여 렌더링된 HTML을 검사할 수 있습니다.

Style 스타일

기본적으로 링크에는 기본 활성 및 비활성 스타일이 있습니다. #theme 섹션을 체크 아웃합니다.

Link

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

to Prop을 변경하여 활성 상태와 비활성 상태를 확인해 봅니다.

raw prop을 사용하여 이 동작을 무시하고 class, active-class 및 inactive-class를 사용하여 자신만의 스타일을 제공할 수 있습니다.

activeClass

inactiveClass

링크 (Link)

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

VSCode에 Tailwind CSS IntelliSense 확장을 사용하고 active-class 및 inactive-class props에 대한 자동 완성을 원하는 경우 .vscode/settings.json에 다음 설정을 추가할 수 있습니다.

.vscode/settings.json

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

로케일: badge{label="4.7+" class="align-text-top"}

링크 구성 요소는 설치 시 @nuxtjs/i18n와 자동으로 통합됩니다. 내부 링크는 수동 래핑 없이 $localePath 도우미를 사용하여 자동으로 지역화됩니다.

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

필요한 경우 수동으로 localePath() 또는 localeRoute()를 사용할 수 있습니다.

Nuxt UI의 국제화에 대해 자세히 알아보세요.

API 파일

Props (### 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.
`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`

이 구성 요소는 모든 기본 <a> HTML 속성도 지원합니다.

Slots

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

Theme 테마

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'
              ]
            }
          ]
        }
      }
    })
  ]
})

변경 로그

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.