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
Super-charged 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 |
✨ v1 released!
Read the announcement post, provide any feedback or questions in this discussion
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 } = 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