@unhead/vue

@unhead/vue

Full-stack <head> management for Vue applications

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

# 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.

Usage

Setup

Client-side (SPA)

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)

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 }
}

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

<!-- Home.vue -->
<script setup lang="ts">
import { useHead } from '@unhead/vue'

useHead({
  title: 'Home Page',
  meta: [
    {
      name: 'description',
      content: 'Welcome to our website'
    }
  ]
})
</script>

<template>
  <h1>Home</h1>
</template>

Setting Meta Tags

<!-- About.vue -->
<script setup lang="ts">
import { useSeoMeta } from '@unhead/vue'

useSeoMeta({
  title: 'About Us',
  description: 'Learn more about our company',
  ogTitle: 'About Our Company',
  ogDescription: 'Our fantastic about page',
  ogImage: 'https://example.com/image.jpg',
})
</script>

<template>
  <h1>About Us</h1>
</template>

Reactive Head Elements

<!-- Profile.vue -->
<script setup lang="ts">
import { useHead } from '@unhead/vue'
import { ref } from 'vue'

const userName = ref('User')

// Vue automatically tracks reactive changes
useHead({
  title: () => `${userName.value} - Profile`, // Reactive title
  meta: [
    {
      name: 'description',
      content: () => `${userName.value}'s profile page`, // Reactive description
    },
  ],
})

function updateName() {
  userName.value = 'New Name'
  // Title and meta automatically update!
}
</script>

<template>
  <h1>{{ userName }}'s Profile</h1>
  <button @click="updateName">
    Update Name
  </button>
</template>

Development

# Install dependencies
npm install

# Generate build files
npm run build

# Run tests
npm run test

License

MIT