Unhead v1.1 released

Universal document <head> tag manager.

Framework agnostic. Platform agnostic.

Now powering Vue. More integrations coming soon.

useHead
// all your favourites, fully typed
useHead({
title: 'Hello World',
titleTemplate: (title) => `${title} | MySite`,
// class API support
bodyAttrs: { class: { overflow: () => isModalOpen } },
meta: [
{ name: 'description', content: 'Hello World' },
],
script: [ { src: 'https://example.com/script.js' } ],
link: [{
rel: 'stylesheet',
href: 'https://example.com/style.css'
}],
})
useServerHead
// server only head tags for improved performance
useServerHead({
link: [
{
// promises supported
href: import('~/assets/MyFont.css?url'),
rel: 'stylesheet',
type: 'text/css'
}
]
})
useSeoMeta
// the easiest meta tags
useSeoMeta({
charset: 'utf-8',
description: 'Welcome to my site',
ogImage: 'https://example.com/image.jpg',
ogLocale: 'en',
ogLocaleAlternate: ['fr', 'zh'],
})
DOM events
// DOM events right in your head
useHead({
script: [
{
// async prop support
src: './script.js',
// dom handlers
onload: () => alert('woo'),
},
],
htmlAttrs: { onclick: () => alert('just works') },
})

What's included

Side-effect DOM Patching

New DOM patching algorithm, faster and plays nicely with your existing tags and attributes.

Intuitive Tags

Automatic dedupes, ordering, class merging and more.

Powerful Plugins

Optimise your tags with critical tags, infer seo meta tags and more.

Fully typed

Powered by zhead, a fully typed, augmentable head Schema.

Runtime builds

Leverage the SSR runtime for a 0kb client overhead.

Fully extensible

Powered by hookable, you can hook into anything.

Contributors

This package is most possible by these amazing sponsors.