@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]

Features

- 🖖 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)

Installation

``bash


npm

npm install @unhead/vue

yarn

yarn add @unhead/vue

pnpm

pnpm add @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




`

$3

`vue




`

$3

`vue




`

Development

`bash


Install dependencies

npm install

Generate build files

npm run build

Run tests

npm run test
``

License

MIT

[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