Unhead
Nuxt
Core Concepts

Components

Copy for LLMs
On this page

Introduction

Nuxt exports several Vue components 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 Vue component may make more sense for your project.

Usage

For full usage instructions please refer to the Nuxt documentation.

<script setup lang="ts">
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>
Edit this page
Markdown For LLMs
Did this page help you?

Context & Reactivity

Learn how to effectively use Vue's reactivity with Unhead for head tag management, and manage async context in your components.

Installation

Get started with Unhead Schema.org by installing the dependency to your project.