Package Exports
- @vueuse/head
- @vueuse/head/dist/index.cjs
- @vueuse/head/dist/index.mjs
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vueuse/head) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@vueuse/head
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/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