nuxt logo

문서 번역

Version 33.17

useHead

useHead는 Nuxt 앱의 개별 페이지의 head 속성을 사용자 정의합니다.

useHead 컴포저블 함수는 Unhead에 의해 구동되며, 프로그래밍적이고 반응적인 방식으로 head 태그를 관리할 수 있게 해줍니다. 데이터가 사용자나 신뢰할 수 없는 출처에서 오는 경우, useHeadSafe를 확인하는 것을 권장합니다.

이것도 참고 getting-started > seo-meta

Type

useHead(meta: MaybeComputedRef<MetaObject>): void

아래는 useHead의 비반응형 타입입니다.

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[]
  htmlAttrs?: HtmlAttributes
  bodyAttrs?: BodyAttributes
}

더 자세한 타입은 @unhead/vue를 참조하세요.

useHead의 속성은 ref, computed, reactive 속성을 수용할 수 있도록 동적일 수 있습니다. meta 매개변수는 객체를 반환하는 함수를 수용하여 전체 객체를 반응형으로 만들 수 있습니다.

Params

meta

Type: MetaObject

다음의 head 메타데이터를 수용하는 객체:

  • meta: 배열의 각 요소는 새로 생성된 <meta> 태그에 매핑되며, 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Array<Record<string, any>>
  • link: 배열의 각 요소는 새로 생성된 <link> 태그에 매핑되며, 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Array<Record<string, any>>
  • style: 배열의 각 요소는 새로 생성된 <style> 태그에 매핑되며, 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Array<Record<string, any>>
  • script: 배열의 각 요소는 새로 생성된 <script> 태그에 매핑되며, 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Array<Record<string, any>>
  • noscript: 배열의 각 요소는 새로 생성된 <noscript> 태그에 매핑되며, 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Array<Record<string, any>>
  • titleTemplate: 개별 페이지의 제목을 사용자 정의하기 위한 동적 템플릿을 구성합니다.
    • Type: string | ((title: string) => string)
  • title: 개별 페이지의 정적 제목을 설정합니다.
    • Type: string
  • bodyAttrs: <body> 태그의 속성을 설정합니다. 각 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Record<string, any>
  • htmlAttrs: <html> 태그의 속성을 설정합니다. 각 객체 속성은 해당 속성에 매핑됩니다.
    • Type: Record<string, any>

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/composables/use-head