Unhead

Vue

Components

Use the <Head> component to manage your head tags.

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.

The component will 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</title>
    <meta name="description" content="My awesome site description">
  </Head>
</template>

Install Vue Unhead

Learn how to start using Unhead with Vue.

Best Practices

Master Vue and Unhead by following the best practices.