@vueuse/head
Document head management for Vue. Powered by Unhead.
|
Created by egoist, maintained by harlan-zw Follow |
🌇 Sunsetting @vueuse/head
The @vueuse/head package is a simple compatible wrapper around Unhead, they share an almost identical API.
In the coming months, the @vueuse/head package will be deprecated.
If you're setting up this package on a new project, you should
use the @unhead/vue package directly.
Further documentation, guides and announcements will be out soon,
for now you can follow the installation guide.
Features
💎 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
Installation
npm i @vueuse/head
# Or Yarn
yarn add @vueuse/headRequires vue >= v3 or >=2.7
Usage
Vue 3
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")Vue 2
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')SSR Rendering
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>`Further Documentation
Refer to the unhead documentation for full API reference and more.
Sponsors
License
MIT © EGOIST MIT License © 2022-PRESENT Harlan Wilton
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
