---
title: "useHead"
description: "useHead 自定义你的 Nuxt 应用中各个页面的 head 属性。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/api/composables/use-head"
---
# useHead
> useHead 自定义你的 Nuxt 应用中各个页面的 head 属性。
## 用法
`useHead` 组合式函数允许你以编程和响应式的方式管理你的 head 标签，由 [Unhead](https://unhead.unjs.io) 提供支持。它让你可以自定义 HTML 文档 `` 部分的 meta 标签、链接、脚本及其它元素。
```vue [app.vue]
```
::warning
如果数据来自用户或其他不受信任的来源，我们建议你查看 [`useHeadSafe`](https://nuxt.zhcndoc.com/docs/3.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 {
/**
* Updates the entry with new input.
*
* Will first clear any side effects for previous input.
*/
patch: (input: Input) => void
/**
* Dispose the entry, removing it from the active head.
*
* Will queue side effects for removal.
*/
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[]` | 样式对象数组。每个元素映射为 `