Skip to content

vueuse/head

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

@vueuse/head

NPM version NPM Downloads GitHub stars

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

🌇 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/head

Requires 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