useHead

源码
useHead 自定义 Nuxt 应用中各个页面的 head 属性。

用法

useHead 组合式函数允许你以编程和响应式的方式管理你的 head 标签，由 Unhead 提供支持。它让你能够自定义 HTML 文档 <head> 部分中的 meta 标签、链接、脚本以及其他元素。

app/app.vue
<script setup lang="ts">
useHead({
  title: '我的应用',
  meta: [
    { name: 'description', content: '我的精彩网站。' },
  ],
  bodyAttrs: {
    class: 'test',
  },
  script: [{ innerHTML: 'console.log(\'Hello world\')' }],
})
</script>
如果数据来自用户或其他不可信来源，我们建议你查看 useHeadSafe。
useHead 的属性可以是动态的，接受 ref、computed 和 reactive 属性。meta 参数也可以接受一个返回对象的函数，以使整个对象具有响应性。

类型

Signature
export function useHead (meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<UseHeadInput>

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
}

interface ActiveHeadEntry<Input> {
  /**
   * 使用新的输入更新条目。
   *
   * 会先清除之前输入的任何副作用。
   */
  patch: (input: Input) => void
  /**
   * 销毁该条目，将其从激活的 head 中移除。
   *
   * 会将移除的副作用加入队列。
   */
  dispose: () => void
}

请参阅 @unhead/schema 以了解更详细的类型。

参数

meta：一个接受 head 元数据属性的对象，用于自定义页面的 <head> 部分。所有属性都支持响应式值（ref、computed、reactive），或者可以是一个返回元数据对象的函数。

属性类型描述
titlestring设置页面标题。
titleTemplatestring | ((title?: string) => string)配置一个动态模板来自定义页面标题。可以是带有 %s 占位符的字符串或一个函数。
baseBase设置文档的 <base> 标签。
linkLink[]链接对象数组。每个元素都会映射为一个 <link> 标签，对象属性对应 HTML 属性。
metaMeta[]元数据对象数组。每个元素都会映射为一个 <meta> 标签，对象属性对应 HTML 属性。
styleStyle[]样式对象数组。每个元素都会映射为一个 <style> 标签，对象属性对应 HTML 属性。
scriptScript[]脚本对象数组。每个元素都会映射为一个 <script> 标签，对象属性对应 HTML 属性。
noscriptNoscript[]noscript 对象数组。每个元素都会映射为一个 <noscript> 标签，对象属性对应 HTML 属性。
htmlAttrsHtmlAttributes设置 <html> 标签的属性。每个对象属性都会映射到对应的属性。
bodyAttrsBodyAttributes设置 <body> 标签的属性。每个对象属性都会映射到对应的属性。

返回值

这个可组合函数不返回任何值。它会将 head 元数据注册到 Unhead，由 Unhead 负责实际的 DOM 更新。

基础 Meta 标签

app/pages/about.vue
<script setup lang="ts">
useHead({
  title: '关于我们',
  meta: [
    { name: 'description', content: '了解更多关于我们公司的信息' },
    { property: 'og:title', content: '关于我们' },
    { property: 'og:description', content: '了解更多关于我们公司的信息' },
  ],
})
</script>

响应式 Meta 标签

app/pages/profile.vue
<script setup lang="ts">
const profile = ref({ name: 'John Doe' })

useHead({
  title: computed(() => profile.value.name),
  meta: [
    {
      name: 'description',
      content: computed(() => `个人资料页面：${profile.value.name}`),
    },
  ],
})
</script>

使用函数实现完整响应式

app/pages/dynamic.vue
<script setup lang="ts">
const count = ref(0)

useHead(() => ({
  title: `计数：${count.value}`,
  meta: [
    { name: 'description', content: `当前计数是 ${count.value}` },
  ],
}))
</script>

添加外部脚本和样式

app/pages/external.vue
<script setup lang="ts">
useHead({
  link: [
    {
      rel: 'stylesheet',
      href: 'https://cdn.example.com/styles.css',
    },
  ],
  script: [
    {
      src: 'https://cdn.example.com/script.js',
      async: true,
    },
  ],
})
</script>

body 和 HTML 属性

app/pages/themed.vue
<script setup lang="ts">
const isDark = ref(true)

useHead({
  htmlAttrs: {
    lang: 'en',
    class: computed(() => isDark.value ? 'dark' : 'light'),
  },
  bodyAttrs: {
    class: 'themed-page',
  },
})
</script>
在 Docs > 4 X > Getting Started > Seo Meta 中查看详情