Full-stack <head> manager built for Vue.
npm install @unhead/vue> Full-stack management for Vue applications
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
- 🖖 Vue-optimized head management
- 🔄 Reactive titles, meta tags, and other head elements
- 🔍 SEO-friendly head control
- 🖥️ Server-side rendering support
- 📦 Lightweight with zero dependencies (except for Vue & unhead)
``bashnpm
npm install @unhead/vue
Usage
$3
#### Client-side (SPA)
`ts
import { createHead } from '@unhead/vue/client'
// main.ts
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
const head = createHead()
app.use(head)
app.mount('#app')
`#### Server-side (SSR)
`ts
import { createHead } from '@unhead/vue/server'
// entry-server.ts
import { renderToString } from 'vue/server-renderer'
import { createApp } from './main'export async function render(url: string) {
const { app } = createApp()
const head = createHead()
app.use(head)
const html = await renderToString(app)
return { html, head }
}
``ts
import { createHead } from '@unhead/vue/client'
// entry-client.ts (for hydration)
import { createApp } from './main'const { app } = createApp()
const head = createHead()
app.use(head)
app.mount('#app')
`$3
`vue
Home
`$3
`vue
About Us
`$3
`vue
{{ userName }}'s Profile
`Development
`bash
Install dependencies
npm installGenerate build files
npm run buildRun tests
npm run test
``
[npm-version-src]: https://img.shields.io/npm/v/@unhead/vue/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@unhead/vue
[npm-downloads-src]: https://img.shields.io/npm/dm/@unhead/vue.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@unhead/vue
[license-src]: https://img.shields.io/github/license/unjs/unhead.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/unjs/unhead/blob/main/LICENSE