unhead
v2.0.19
Published
Full-stack <head> manager built for any framework.
Readme
unhead
Full-stack
<head>manager built for any framework
Features
- 🚀 Framework agnostic - works with any framework
- 🔄 Reactive head management
- 🔍 SEO-friendly with rich meta tag support
- 🖥️ Server-side rendering support
- 📦 Lightweight and tree-shakable
- ⚡ Performance optimized with minimal runtime overhead
- 🎯 Type-safe with full TypeScript support
Installation
# npm
npm install unhead
# yarn
yarn add unhead
# pnpm
pnpm add unheadUsage
Basic Usage
import { createHead, useHead } from 'unhead'
// Create a head instance
const head = createHead()
// Use head tags
useHead({
title: 'My App',
meta: [
{
name: 'description',
content: 'My awesome application'
}
]
}, { head })Server-Side Rendering
import { createHead, renderSSRHead } from 'unhead/server'
const head = createHead()
// Add head entries
useHead({
title: 'SSR App',
meta: [{ name: 'description', content: 'Server-rendered app' }]
}, { head })
// Render head tags
const { headTags, bodyTags } = await renderSSRHead(head)Client-Side Hydration
import { createHead, renderDOMHead } from 'unhead/client'
const head = createHead()
// Enable DOM rendering
renderDOMHead(head)
// Add reactive head entries
useHead({
title: 'Client App'
}, { head })Framework Integrations
Unhead provides optimized integrations for popular frameworks:
- Vue:
@unhead/vue - React:
@unhead/react - Angular:
@unhead/angular - Svelte:
@unhead/svelte - SolidJS:
@unhead/solid-js
Documentation
Visit the documentation site for comprehensive guides and API references.