Nuxt/docs/content/3.api/1.composables/use-head.md

48 lines
2.0 KiB
Markdown
Raw Normal View History

# `useHead`
::ReadMore{link="/guide/features/head-management"}
Nuxt provides a composable to update the head properties of your page with an [`MetaObject`](/api/composables/use-head/#metaobject) of meta properties with keys corresponding to meta tags:
`title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata.
```js
useHead(options: MetaObject)
```
::alert{icon=👉}
**`useHead` only works during `setup`**.
::
## Example
The example below changes the website's title in the `meta` and inserts a Google Font using the `link` property.
```js
export default {
setup () {
useHead({
meta: [
{ name: 'title' content: 'Nuxt 3 - The Hybrid Vue Framework' }
],
link: [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
{ rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', crossorigin: '' },
]
})
}
}
```
## `MetaObject`
* **charset**: the character encoding in which the document is encoded => `<meta charset="<value>" />` (default: `'utf-8'`)
* **viewport**: configuration of the viewport (the area of the window in which web content can be seen) => `<meta name="viewport" content="<value>" />` (default: `'width=device-width, initial-scale=1'`)
* **meta**: array, each item maps to a newly-created `<meta>` element, where object properties map to attributes.
* **link**: array, each item maps to a newly-created `<link>` element, where object properties map to attributes.
* **style**: array, each item maps to a newly-created `<style>` element, where object properties map to attributes.
* **script**: array, each item maps to a newly-created `<script>` element, where object properties map to attributes.
All elements in the meta object are optional. You can also pass only single values.