`, `<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. ```vue <script lang="ts" setup> import { Head } from '@unhead/vue/components' </script> <template> <Head> <title>My awesome site

--- title: " Component" description: "Template-based head management with Head, Title, Meta, Link, Script components. Alternative to useHead() for Vue templates." canonical_url: "https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components" last_updated: "2026-05-17T10:37:52.638Z" --- **Quick Answer:** Use ``, ``, `<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. ```vue <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.