TypeScript
Get Started

Unhead: Head Management for Vue, React, Svelte & More

What is Unhead? A framework-agnostic library for managing titles, meta tags, scripts, and other HTML <head> elements. It works with Vue, React, Svelte, Solid, Angular, and vanilla TypeScript.

Use Unhead to update document metadata from application code during server or client rendering.

Get started

Choose your framework below. The examples on this site will update to use its Unhead integration.

Intro to Unhead
See how Unhead manages tags during server and client rendering
Single Page Applications
Add template defaults and prerender public SPA routes
Starter Recipes
Examples for common head-management scenarios

Core concepts

These guides cover the behavior you will use most often.

Titles & Title Templates
Set page titles and shared title templates
Tag Sorting & Placement
Control where and how tags are rendered in your document
Class & Style Attributes
Manage attributes on the HTML and body elements
Inline Style & Scripts
Add and manage inline content in your head elements
Tag Deduplication
Understand how Unhead prevents and resolves duplicate tags
DOM Event Handling
Attach load, error, and body event handlers
Script Loading
Control script triggers, lifecycle, APIs, and resource hints

Extend Unhead

Add custom runtime behavior with plugins, or transform head calls during your build.

Plugins API
Create custom plugins and extend core functionality
Build Plugins
Run Unhead transforms through Vite or webpack

Built-in plugins

Unhead ships plugins for these common cases.

Template Params
Use dynamic template parameters in your head tags
Alias Sorting
Order tags relative to named tags
Canonical Plugin
Normalize canonical URLs against a configured host
Infer SEO Meta
Derive Open Graph and Twitter tags from existing metadata
Minify
Minify inline scripts and styles during server rendering
Validate
Report invalid or risky resolved head tags during development
Did this page help you?