`, `<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>`{lang="html"} component that can be used to manage your head tags. While it's recommended to use the `useHead()`{lang="ts"} composable as it offers a more flexible API with full TypeScript support, the `<Head>`{lang="html"} 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>`{lang="html"} 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.' navigation: title: ' Component' --- **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>`{lang="html"} component that can be used to manage your head tags. While it's recommended to use the `useHead()`{lang="ts"} composable as it offers a more flexible API with full TypeScript support, the `<Head>`{lang="html"} 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>`{lang="html"} 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.