Document head management for Vue. Powered by Unhead.
Created by egoist, maintained by harlan-zw π Support ongoing development by sponsoring us. Follow π¦ @harlan_zw for updates β’ Join Discord for support |
- β¨ New Tag:
templateParams
- π New
useHeadSafe
- and much more!
Read the release notes.
- π Fully typed augmentable Schema
- π§βπ€βπ§ Side-effect based DOM patching, plays nicely your existing other tags and attributes
- π£ Intuitive deduping, sorting, title templates, class merging and more
- πͺ Extensible hook / plugin based API
npm i @vueuse/head
# Or Yarn
yarn add @vueuse/head
Requires vue >= v3 or >=2.7
Register the Vue plugin:
import { createApp } from "vue"
import { createHead } from "@vueuse/head"
const app = createApp()
const head = createHead()
app.use(head)
app.mount("#app")
Register the Vue plugin:
import Vue from 'vue'
import { createHead, HeadVuePlugin } from "@vueuse/head"
const head = createHead()
// needed for Vue 2
Vue.use(HeadVuePlugin, head)
Vue.use(head)
new Vue({
render: h => h(App),
}).$mount('#app')
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, bodyTags } = await renderHeadToString(head)
const finalHTML = `
<html${htmlAttrs}>
<head>
${headTags}
</head>
<body${bodyAttrs}>
<div id="app">${appHTML}</div>
${bodyTags}
</body>
</html>`
Refer to the unhead documentation for full API reference and more.
MIT Β© EGOIST MIT License Β© 2022-PRESENT Harlan Wilton