---
title: "useHead"
description: "useHead 可自定义 Nuxt 应用中各个页面的 head 属性。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-head"
---
# useHead
> useHead 可自定义 Nuxt 应用中各个页面的 head 属性。
## 用法
`useHead` 组合式函数允许你以编程和响应式的方式管理 head 标签，由 [Unhead](https://unhead.unjs.io) 提供支持。它让你可以自定义 HTML 文档中 `` 部分的 meta 标签、链接、脚本和其他元素。
```vue [app/app.vue]
```
::warning
如果数据来自用户或其他不可信来源，我们建议你了解一下 [`useHeadSafe`](https://nuxt.zhcndoc.com/docs/4.x/api/composables/use-head-safe)。
::
::note
`useHead` 的属性可以是动态的，支持 `ref`、`computed` 和 `reactive` 属性。`meta` 参数也可以接受一个返回对象的函数，从而让整个对象具有响应式。
::
## 类型
```ts [Signature]
export function useHead (meta: MaybeComputedRef): ActiveHeadEntry
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 {
/**
* 使用新的输入更新条目。
*
* 会先清除先前输入的任何副作用。
*/
patch: (input: Input) => void
/**
* 销毁条目，将其从活动头信息中移除。
*
* 会排队执行移除副作用。
*/
dispose: () => void
}
```
有关更详细的类型，请参见 [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts)。
## 参数
`meta`：一个接收 head 元数据属性的对象，用于自定义页面的 `` 部分。所有属性都支持响应式值（`ref`、`computed`、`reactive`），或者可以是一个返回元数据对象的函数。
| 属性 | 类型 | 描述 |
| --------------- | ---------------------------------------- | --------------------------------------------------------- |
| `title` | `string` | 设置页面标题。 |
| `titleTemplate` | `string \| ((title?: string) => string)` | 配置一个动态模板来自定义页面标题。可以是带有 `%s` 占位符的字符串，或一个函数。 |
| `base` | `Base` | 设置文档的 `` 标签。 |
| `link` | `Link[]` | 链接对象数组。每个元素都会映射为一个 `` 标签，对象属性对应 HTML 属性。 |
| `meta` | `Meta[]` | 元对象数组。每个元素都会映射为一个 `` 标签，对象属性对应 HTML 属性。 |
| `style` | `Style[]` | 样式对象数组。每个元素都会映射为一个 `