`, `<meta>`, and `<link>` inside it. ## When to Use `<Head>` `<Head>` provides HTML-like template syntax. Use `useHead()` instead when you need typed object input or entry options. ## Usage Place the native elements you would normally put in `<head>` 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." canonical_url: "https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components" last_updated: "2026-08-11T00:45:41.675Z" --- Import `` from `@unhead/vue/components`, then place native lowercase elements such as ``, `<meta>`, and `<link>` inside it. ## When to Use `<Head>` `<Head>` provides HTML-like template syntax. Use `useHead()` instead when you need typed object input or entry options. ## Usage Place the native elements you would normally put in `<head>` inside the component: ```vue <script lang="ts" setup> import { Head } from '@unhead/vue/components' </script> <template> <Head> <title>Example Site ``` Unmounting `` removes its entry.