`, `<Meta>`, `<Link>`, and `<Script>` components for template-based head management. Import from `@unhead/vue/components`. ## [What is the Head component?](#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?](#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

Component · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview) [Releases](https://unhead.unjs.io/docs/vue/releases/v3) Vue - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation) - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation) v3 (stable) Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn) - Get Started - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/vue/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/loading-scripts) - [Context & Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context) - [ Component](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components) - [Options API](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) - [Pause DOM Rendering](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering) - [StreamingNew](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - Build Plugins - [Overview](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/overview) - [Tree-Shaking](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/tree-shaking) - [useSeoMeta Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/seo-meta-transform) - [Minify Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/minify-transform) - [Devtools](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/devtools) - Plugins - [Template Params](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/vue/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/vue/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/vue/head/guides/plugins/infer-seo-meta-tags) - [Minify](https://unhead.unjs.io/docs/vue/head/guides/plugins/minify) - [Validate](https://unhead.unjs.io/docs/vue/head/guides/plugins/validate) Core Concepts # Component [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.vue/head/guides/1.core-concepts/1.components.md) Last updated Jan 19, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: sync](https://github.com/unjs/unhead/commit/d2f86454774aa60706628b46a850653e1e4d56d9). On this page - [What is the Head component?](#what-is-the-head-component) - [How do I use the Head component?](#how-do-i-use-the-head-component) **Quick Answer:** Use ``, ``, `<Meta>`, `<Link>`, and `<Script>` components for template-based head management. Import from `@unhead/vue/components`. ## [What is the Head component?](#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?](#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 ``` When the head component is unmounted, it will remove all the tags that were added. [Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.vue/head/guides/1.core-concepts/1.components.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.vue/head/guides/1.core-concepts/1.components.md) Did this page help you? [Context & Reactivity Use refs, computed, and Pinia with useHead(). Handle async context in lifecycle hooks with injectHead() or effectScope().](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context) [Options API Use the head() option in Vue components with VueHeadMixin. Access component data and computed properties for reactive head tags.](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) On this page - [What is the Head component?](#what-is-the-head-component) - [How do I use the Head component?](#how-do-i-use-the-head-component) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Head Management - [Getting Started](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [useHead](https://unhead.unjs.io/docs/vue/head/api/composables/use-head) - [useSeoMeta](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta) - [useHeadSafe](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe) - [useScript](https://unhead.unjs.io/docs/vue/head/api/composables/use-script) ### Schema.org - [Getting Started](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview) - [useSchemaOrg](https://unhead.unjs.io/docs/vue/schema-org/api/composables/use-schema-org) - [Nodes](https://unhead.unjs.io/docs/vue/schema-org/guides/core-concepts/nodes) - [Recipes](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/identity) ### Guides - [Titles](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Streaming SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - [DOM Events](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Plugins](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) - [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer) ### Articles - [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo) ### Research - [State of in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026) - [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance) - [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)