Releases: vueuse/head
v1.0.0
I wrote an announcement post on my blog if you're interested in some background.
If you have any questions, please add them to the Release v1.0.0 discussion
v1.0.0 Release
🤖 Core
Now powered by Unhead.
Featuring a new DOM patching algorithm that tracks side effects gracefully, less aggressive removal of tags and attributes
Includes ⚡ DOM rendering optimisations, 120% (~10ms for an avg site) faster, async for quicker initial main thread load.
✨ Enhancements
htmlAttrs / bodyAttrs merging
Now merged by default instead of replace.
useHead({
htmlAttrs: {
class: 'my-class',
},
})
// we don't want that class to be on a specific page, instead we want a new class
useHead({
htmlAttrs: {
class: 'another-class',
},
})
// <html class="my-class another-class">Array / Object Classes
When using the htmlAttrs or bodyAttrs options, you can use the class attribute to add classes to the html or body elements.
const darkMode = false
useHead({
htmlAttrs: {
class: {
// will be rendered
'dark': darkMode,
// will not be rendered
'light': !darkMode,
}
},
bodyAttrs: { class: ['layout-id', 'page-id' ] }
})Better deduping
Tag deduping is now vastly improved. It's likely you won't need key anymore.
Includes support for meta content array support, reduces boilerplate by using arrays for meta tags.
useHead({
meta: [
{
name: 'og:image',
content: [
'https://example.com/image.png',
'https://example.com/image2.png',
],
},
],
})Prop promises
You can provide a promise to props and it will be resolved when rendering the tags.
useHead({
script: [
{
children: new Promise(resolve => resolve('console.log("hello world")'))
},
],
})🚀 New Features
useServerHead
Lets you render tags on the server only. This has the same API as useHead.
useServerHead({
scripts: [
{
// this wouldn't work on the client, so we use useServerHead
src: () => import('~/assets/my-script.js?url'),
}
]
})useSeoMeta
Define meta tags in a flat object, fully typed.
useSeoMeta({
description: 'My about page',
ogDescription: 'Still about my about page',
ogTitle: 'About',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})tagPosition
Lets you define the position of a tag in the DOM.
useHead({
script: [
{
src: 'https://example.com/script.js',
tagPosition: 'bodyOpen',
}
]
})tagPriority
Lets you define the priority of a tag with a number or string.
useHead({
script: [{ key: 'not-important', src: '/not-important-script.js',},],
})
useHead({
script: [
{
// script is the tag name to target, `not-important` is the key we're targeting
tagPriority: 'before:script:not-important',
src: '/must-be-first-script.js',
},
],
})tagDuplicateStrategy
DOM Event Handlers
Function support for DOM event handlers.
useHead({
bodyAttrs: {
onresize: (e) => {
console.log('resized', e)
}
},
script: [
{
src: 'https://example.com/analytics.js',
onload: (el) => {
console.log('loaded', el)
}
}
]
})Hooks
Engine is now powered by hooks, provided by hookable. This allows you to hook into
any of the core functionality.
See API hooks and Infer SEO MetaTags, not documented properly yet.
New shortcut composables
Same API as useHead, but targeted as a specific tag type.
- useTagTitle
- useTagBase
- useTagMeta
- useTagLink
- useTagScript
- useTagStyle
- useTagNoscript
- useHtmlAttrs
- useBodyAttrs
- useTitleTemplate
Migration Guide
Please report any issues you find and they will fixed be promptly.
You may consider using @unhead/vue directly if you don't need @vueuse/head.
Verify your tags
The new DOM patching algorithm has not been tested in all possible scenarios, it's possible that there are unforeseen edge cases.
htmlAttrs and bodyAttrs merge strategy
If you had built your code around with the assumption that setting htmlAttrs or bodyAttrs would clear the old tags, this is now different.
// old
useHead({
htmlAttrs: {
class: 'my-class',
},
})
useHead({
htmlAttrs: {
class: 'new-class',
},
})
// <html class="new-class">// new
useHead({
htmlAttrs: {
class: 'my-class',
},
})
useHead({
htmlAttrs: {
class: 'new-class',
},
})
// <html class="my-class new-class">Check the documentation to learn more.
Duplicate tags in the same entry allowed
To make duplicate tag handling more intuitive, duplicate tags are now allowed in the same entry.
Having these metas across useHead's will still dedupe as before.
// old
useHead({
meta: [
{ name: 'description', content: 'foo' },
{ name: 'description', content: 'bar' },
],
})
// only the last tag is rendered
// <meta name="description" content="bar">// old
useHead({
meta: [
{ name: 'description', content: 'foo' },
{ name: 'description', content: 'bar' },
],
})
// both are rendered
// <meta name="description" content="foo">
// <meta name="description" content="bar">v1.0.0-next.3
- chore: expose
VueHeadMixin - chore: bump unhead
v1.0.0-next.2
- chore: bump unhead, update tests and examples
- chore: improve doc
v1.0.0-next.1
v1.0.0-rc.14
What's Changed
Full Changelog: v1.0.0-rc.13...v1.0.0-rc.14
Contributors
Assets 2
v1.0.0-rc.13
What's Changed
- add vue 2.7 compatibility to Head component by @vetruvet in #147
- fix: dedupe
htmlAttrsandbodyAttrsfor csr by @harlan-zw in #149
New Contributors
Full Changelog: v1.0.0-rc.12...v1.0.0-rc.13
Contributors
Assets 2
v1.0.0-rc.12
- chore(pkg): bump zhead
- fix: vue 2.7 globalProperties, fixes #141
Full Changelog: v1.0.0-rc.11...v1.0.0-rc.12
v1.0.0-rc.11
What's Changed
- fix: ensure single pass of
htmlAttrsanitization, fixes #142 by @harlan-zw in #143 - fix: ensure csr elements are created equally by @harlan-zw in #145
Full Changelog: v1.0.0-rc.10...v1.0.0-rc.11
Contributors
Assets 2
v1.0.0-rc.10
- chore(pkg): bump deps
v1.0.0-rc.9
- fix: ensure tags props are immutable (#139)