@vueuse/head
Advanced tools
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 |
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.
npm i @vueuse/head
# Or Yarn
yarn add @vueuse/head
Requires vue >= v3 or >=2.7
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")
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')
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>`
Refer to the unhead documentation for full API reference and more.
MIT © EGOIST MIT License © 2022-PRESENT Harlan Wilton
1.3.1
unhead@1.3.0FAQs
Document head manager for Vue 3. SSR ready.
The npm package @vueuse/head receives a total of 100,083 weekly downloads. As such, @vueuse/head popularity was classified as popular.
We found that @vueuse/head demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.