Unhead · Full stack package
[Unhead Home](https://unhead.unjs.io/ "Home")
- [Docs](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)
[Releases](https://unhead.unjs.io/releases)
Search…```k`` /`
[Unhead on GitHub](https://github.com/unjs/unhead)
[🌊 Unhead v3 is here](https://unhead.unjs.io/docs/releases/v3)
# The full stack package for any framework.
Unhead wraps your document template, improving reactive SSR JavaScript framework SEO and performance.
[Get Started](https://unhead.unjs.io/docs/typescript/head/guides/get-started/overview) [ Install Unhead](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation)
[Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation) [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation) [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation) [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation) [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation) [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)
Unhead Principles
## Why Unhead
01
### Complete Developer Experience
- [useHead()](https://unhead.unjs.io/docs/typescript/head/api/composables/use-head) with type narrowing, deduping, and tag merging
- Flat [useSeoMeta()](https://unhead.unjs.io/docs/typescript/head/api/composables/use-seo-meta) for 100+ meta tags
- [useScript()](https://unhead.unjs.io/docs/typescript/head/api/composables/use-script) for performant third party loading
- [useSchemaOrg()](https://unhead.unjs.io/docs/typescript/schema-org/api/composables/use-schema-org) for automatic Schema.org graphs
- Plugins for tag validation, canonical URLs, and 7 more
02
### Built for Performance
- ~4.4kb gzipped, tree shakable utilities
- Built in HTML minification
- [Streaming SSR](https://unhead.unjs.io/releases/v3) with head tags pushed per chunk
- Automatic [Capo.js](https://unhead.unjs.io/learn/guides/what-is-capo) head tag ordering
03
### Any Framework / Any Bundler
- Vue, React, Solid.js, Svelte, and Angular
- Vite, Webpack, Rollup, and more
- Built in [Vite Devtools](https://unhead.unjs.io/docs/head/guides/debugging) integration
- Hook into every stage of head resolution
## Hello useHead()
Unhead aims to provide bullet-proof primitives for a minimal yet powerful API surface.
### ✅ Titles that just work
```
useHead({
title: 'Hello World',
titleTemplate: '%s %separator My App',
})
// Hello World - My App
```
### ✅ DOM Events
```
useHead({
script: [{
src: '/script.js',
onload: () => alert('woo'),
}],
})
```
### ✅ Classes and styles however you like
```
useHead({
bodyAttrs: {
// use strings
style: 'background-color: #343434',
// arrays
class: ['dark', 'overflow'],
},
htmlAttrs: {
// objects
style: {
backgroundColor: 'white',
color: 'black',
},
// computed boolean objects
class: {
dark: () => Date.now() % 2 === 0,
},
},
})
```
## Built For Reactive Lifecycles
All side effects are tracked so that unmounting a component will revert its head modifications and reactive updates can be made at any time.
```
useHead({
title: 'Subscribe now!',
htmlAttrs: {
class: { dark: true, light: false }
},
bodyAttrs: {
'style': { overflow: 'hidden' },
'data-modal': true,
},
link: [{
rel: 'preload',
href: 'https://3p.com/subscribe.js',
as: 'script',
}],
})
```
Mount
Component Not Mounted
## Optimized SEO Tags
Nail your SEO with foolproof flat meta config and the simplest Schema.org you've ever worked with.
### Flat SEO Meta
Was it `` for full stack javascript
Better developer experience, performance and privacy.
useScript
SSR Output
Client Output
```
const script = useScript({
src: 'https://js.cdn/tracker.js',
}, {
trigger: useOnIdle()
})
script.onError((error) => { /* uh oh */ })
// proxy function calls for when the script is loaded
script.proxy.track('foo')
// or just use onLoaded
script.onLoaded((api) => {
api.track('bar')
})
```
```
```
```