@vueuse/head
Document head management for Vue. Powered by Unhead.
### 🌇 Sunsetting @vueuse/head
The `@vueuse/head` package is a simple compatible wrapper around [Unhead](https://unhead.harlanzw.com/), 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](https://unhead.harlanzw.com/integrations/vue/setup).
## 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
```bash
npm i @vueuse/head
# Or Yarn
yarn add @vueuse/head
```
> Requires vue >= v3 or >=2.7
## Usage
### Vue 3
Register the Vue plugin:
```ts
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:
```ts
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
```ts
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 = `
${headTags}
${appHTML}
${bodyTags}