Nuxt 3 reached end of life on 31 July 2026
It no longer receives bug fixes or security patches. Upgrade to Nuxt 4 or get extended support from HeroDevs

Head

源码
Nuxt Kit 提供了帮助你在模块中管理 head 配置的工具。

setGlobalHead

为你的 Nuxt 应用设置全局 head 配置。此工具允许模块以编程方式配置 meta 标签、链接、脚本以及其他会应用于所有页面的 head 元素。

提供的 head 配置将与任何现有的 head 配置进行深度合并，你提供的值将优先覆盖。

这对于需要向应用 head 注入全局 meta 标签、样式表或脚本的模块尤其有用。

类型

// @errors: 2391
// ---cut---
import type { SerializableHead } from '@unhead/vue/types'

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

function setGlobalHead (head: AppHeadMetaObject): void

参数

head

类型: AppHeadMetaObject

包含 head 配置的对象。所有属性均为可选，并会与现有配置合并：

  • charset：文档的字符编码
  • viewport：视口 meta 标签配置
  • meta：meta 标签对象数组
  • link：link 标签对象数组（样式表、图标等）
  • style：内联样式标签对象数组
  • script：脚本标签对象数组
  • noscript：noscript 标签对象数组
  • title：默认页面标题
  • titleTemplate：格式化页面标题的模板
  • bodyAttrs：添加到 <body> 标签的属性
  • htmlAttrs：添加到 <html> 标签的属性

示例

添加全局 Meta 标签

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

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      meta: [
        { name: 'theme-color', content: '#ffffff' },
        { name: 'author', content: '你的名字' },
      ],
    })
  },
})

注入全局样式表

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

添加全局脚本

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

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

设置 HTML 属性

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

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