# @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
```
> [!TIP]
> Using an AI agent? Get the @unhead/vue Skill on [skilld.dev/gh/unjs/unhead](https://skilld.dev/gh/unjs/unhead).
## Usage
### Setup
#### 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')
```
### Basic Usage
```vue
Home
```
### Setting Meta Tags
```vue
About Us
```
### Reactive Head Elements
```vue
{{ userName }}'s Profile
```
## Development
```bash
# Install dependencies
npm install
# Generate build files
npm run build
# Run tests
npm run test
```
## License
[MIT](./LICENSE)
[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