Unhead
Vue
You're viewing Unhead v3 beta documentation. Install with unhead@beta
Core Concepts

<Head> Component

Copy for LLMs
On this page

Quick Answer: Use <Head>, <Title>, <Meta>, <Link>, and <Script> components for template-based head management. Import from @unhead/vue/components.

What is the Head component?

The Unhead Vue package exports a <Head> component that can be used to manage your head tags.

While it's recommended to use the useHead() composable as it offers a more flexible API with full TypeScript support, the <Head> component may make more sense for your project.

How do I use the Head component?

The component takes any child elements that you would normally put in your actual <head> and renders them with Unhead.

<script lang="ts" setup>
import { Head } from '@unhead/vue/components'
</script>

<template>
  <Head>
    <title>My awesome site</title>
    <meta name="description" content="My awesome site description">
  </Head>
</template>

When the head component is unmounted, it will remove all the tags that were added.

Edit this page
Markdown For LLMs
Did this page help you?

Context & Reactivity

Learn how to effectively use Vue's reactivity with Unhead for head tag management, and manage async context in your components.

Options API

Learn how to use the options API with Unhead.