`, `<meta>`, and `<link>` inside it. ## When to Use `<Head>` `<Head>`{lang="html"} provides HTML-like template syntax. Use `useHead()`{lang="ts"} instead when you need typed object input or entry options. ## Usage Place the native elements you would normally put in `<head>`{lang="html"} inside the component: ```vue <script lang="ts" setup> import { Head } from '@unhead/vue/components' </script> <template> <Head> <title>Example Site

--- title: Component description: 'Template-based head management with the Head component and native head elements. An alternative to useHead() for Vue templates.' navigation: title: ' Component' --- Import `` from `@unhead/vue/components`, then place native lowercase elements such as ``, `<meta>`, and `<link>` inside it. ## When to Use `<Head>` `<Head>`{lang="html"} provides HTML-like template syntax. Use `useHead()`{lang="ts"} instead when you need typed object input or entry options. ## Usage Place the native elements you would normally put in `<head>`{lang="html"} inside the component: ```vue <script lang="ts" setup> import { Head } from '@unhead/vue/components' </script> <template> <Head> <title>Example Site ``` Unmounting `` removes its entry.