--- description: useHead customizes the head properties of individual pages of your Nuxt app. --- # `useHead` Nuxt provides the `useHead` composable to add and customize the head properties of individual pages of your Nuxt app. It uses [@vueuse/head](https://github.com/vueuse/head) under the hood. ::alert{icon=👉} `useHead` only works during `setup` or `Lifecycle Hooks`. :: ## Type ```ts useHead(meta: Computable): void interface MetaObject extends Record { charset?: string viewport?: string meta?: Array> link?: Array> style?: Array> script?: Array> noscript?: Array> titleTemplate?: string | ((title: string) => string) title?: string bodyAttrs?: Record htmlAttrs?: Record } ``` Application-wide configuration of the head metadata is possible through [nuxt.config](/api/configuration/nuxt.config#head), or by placing the `useHead` in the `app.vue` file. ::alert{type=info} The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive. :: ## Parameters ### `meta` **Type**: `MetaObject` An object accepting the following head metadata: - `charset` **Type**: `string` **Default**: `utf-8` Specifies character encoding for the HTML document. - `viewport` **Type**: `string` **Default**: `width=device-width, initial-scale=1` Configures the viewport (the user's visible area of a web page). - `meta` **Type**: `Array>` **Default**: `width=device-width, initial-scale=1` Each element in the array is mapped to a newly-created `` tag, where object properties are mapped to the corresponding attributes. - `link` **Type**: `Array>` Each element in the array is mapped to a newly-created `` tag, where object properties are mapped to the corresponding attributes. - `style` **Type**: `Array>` Each element in the array is mapped to a newly-created `