`useHead()`

Manages document head tags (title, meta, link, script) reactively.

Since Nuxt 3.0 Spec ↗

Syntax

useHead(input)

Parameters

Name	Type	Required	Description
`input`	`MaybeComputed<HeadInput>`	Yes	An object (or computed/function) with `title`, `titleTemplate`, `meta`, `link`, `script`, `style`, `htmlAttrs`, `bodyAttrs`.

Returns

void — Registers head entries managed by Unhead.

Examples

<script setup lang="ts">
useHead({
  title: 'Dashboard',
  meta: [{ name: 'description', content: 'Your dashboard' }],
  link: [{ rel: 'canonical', href: 'https://example.com/dash' }],
})
</script>

<script setup lang="ts">
const post = await useFetch('/api/post')
useHead({
  title: () => post.data.value?.title ?? 'Post',
})
</script>

Notes

Reactive: pass functions or computed refs for dynamic values. Tags render during SSR for correct SEO and are deduped by Unhead. For structured social/SEO tags prefer `useSeoMeta`. `useHead` can be called multiple times; later calls merge/override by tag identity.