Head

Source
Nuxt Kit은 모듈에서 head 구성을 관리하는 데 도움이 되는 유틸리티를 제공합니다.

setGlobalHead

Nuxt 애플리케이션에 전역 head 구성을 설정합니다. 이 유틸리티를 사용하면 모듈이 메타 태그, 링크, 스크립트 및 기타 head 요소를 프로그래밍 방식으로 구성하여 모든 페이지에 적용되도록 할 수 있습니다.

제공된 head 구성은 기존 head 구성과 깊은 병합(deep merge) 방식으로 병합되며, 제공한 값이 우선합니다.

이는 애플리케이션 head에 전역 메타 태그, 스타일시트 또는 스크립트를 주입해야 하는 모듈에 특히 유용합니다.

Type

import type { SerializableHead } from '@unhead/vue/types'

interface AppHeadMetaObject extends SerializableHead {
  charset?: string
  viewport?: string
}

function setGlobalHead (head: AppHeadMetaObject): void

Parameters

head

Type: AppHeadMetaObject

head 구성을 포함하는 객체입니다. 모든 속성은 선택 사항이며 기존 구성과 병합됩니다:

  • charset: 문서의 문자 인코딩
  • viewport: 뷰포트 메타 태그 구성
  • meta: 메타 태그 객체 배열
  • link: 링크 태그 객체 배열(스타일시트, 아이콘 등)
  • style: 인라인 스타일 태그 객체 배열
  • script: 스크립트 태그 객체 배열
  • noscript: noscript 태그 객체 배열
  • title: 기본 페이지 제목
  • titleTemplate: 페이지 제목을 포맷팅하기 위한 템플릿
  • bodyAttrs: <body> 태그에 추가할 속성
  • htmlAttrs: <html> 태그에 추가할 속성

Examples

Adding Global Meta Tags

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      meta: [
        { name: 'theme-color', content: '#ffffff' },
        { name: 'author', content: 'Your Name' },
      ],
    })
  },
})

Injecting Global Stylesheets

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
        },
      ],
    })
  },
})

Adding Global Scripts

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      script: [
        {
          src: 'https://cdn.example.com/analytics.js',
          async: true,
          defer: true,
        },
      ],
    })
  },
})

Setting HTML Attributes

import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      htmlAttrs: {
        lang: 'en',
        dir: 'ltr',
      },
      bodyAttrs: {
        class: 'custom-body-class',
      },
    })
  },
})