头部

源文件
Nuxt Kit 提供了一些实用工具，帮助你在模块中管理 head 配置。

setGlobalHead

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

所提供的 head 配置将通过深度合并（deep merging）与现有的 head 配置进行合并，你提供的值具有优先权。

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

类型

// @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: 视口（viewport）元标签配置
  • meta: 元标签对象数组
  • link: 链接标签对象数组（样式表、图标等）
  • style: 内联样式标签对象数组
  • script: 脚本标签对象数组
  • noscript: noscript 标签对象数组
  • title: 默认页面标题
  • titleTemplate: 用于格式化页面标题的模板
  • bodyAttrs: 添加到 <body> 标签的属性
  • htmlAttrs: 添加到 <html> 标签的属性

示例

添加全局元标签

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

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

注入全局样式表

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

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.ac.cn/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',
      },
    })
  },
})