Document head manager for Vue 3.
💛 Support the ongoing development of this project by becoming a GitHub Sponsor.
npm i @vueuse/head
# Or Yarn
yarn add @vueuse/headRegister the Vue plugin:
import { createApp } from 'vue'
import { createHead } from '@vueuse/head'
const app = createApp()
const head = createHead()
app.use(head)
app.mount('#app')Manage head with the composition API useHead in your component:
<script>
import { defineComponent } from 'vue'
import { useHead } from '@vueuse/head'
export default defineComponent({
setup() {
useHead({
title: `Website title`,
meta: [
{
name: `description`,
content: `Website description`,
},
],
})
},
})
</script>In many cases you want to make head tags dynamic, e.g. update document title when clicked a button:
<template>
<button @click="count++">Click</button>
</template>
<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
useHead({
title: computed(() => `Clicked ${count.value} times`),
})
return {
count,
}
},
})
</script>meta, base and other properties can also be a RefObject like the title here, check out API for more.
import { renderToString } from '@vue/server-renderer'
import { renderHeadToString } from '@vueuse/head'
const appHTML = await renderToString(yourVueApp)
// `head` is created from `createHead()`
const { headTags, htmlAttrs, bodyAttrs } = renderHeadToString(head)
const finalHTML = `
<html${htmlAttrs}>
<head>
${headTags}
</head>
<body${bodyAttrs}>
<div id="app">${appHTML}</div>
</body>
</html>
`Create the head manager instance.
interface HeadObject {
title?: MaybeRef<string>
meta?: MaybeRef<HeadAttrs[]>
link?: MaybeRef<HeadAttrs[]>
base?: MaybeRef<HeadAttrs>
style?: MaybeRef<HeadAttrs[]>
script?: MaybeRef<HeadAttrs[]>
htmlAttrs?: MaybeRef<HeadAttrs>
bodyAttrs?: MaybeRef<HeadAttrs>
}
interface HeadAttrs {
[attrName: string]: any
}For meta tags, we use name and property to prevent duplicated tags, you can instead use the key attribute if the same name or property is allowed:
useHead({
meta: [
{
property: 'og:locale:alternate',
content: 'zh',
key: 'zh',
},
{
property: 'og:locale:alternate',
content: 'en',
key: 'en',
},
],
})To set the textContent of an element, use the children attribute:
useHead({
style: [
{
children: `body {color: red}`,
},
],
})useHead also takes reactive object or ref as the argument, for example:
const head = reactive({ title: 'Website Title' })
useHead(head)const title = ref('Website Title')
useHead({ title })- Returns:
HTMLResult
interface HTMLResult {
// Tags in `<head>`
readonly headTags: string
// Attributes for `<html>`
readonly htmlAttrs: string
// Attributes for `<body>`
readonly bodyAttrs: string
}Render the head manager instance to HTML tags in string form.
MIT © EGOIST