@unhead/addons

Unhead addons for build tools and bundlers

Features

• 🛠️ Build-time optimizations for Unhead
• 🌲 Tree-shake server composables from client bundles
• ⚡ Transform useSeoMeta calls for better performance
• 📦 Support for Vite, Webpack, and other bundlers

Installation

# npm
npm install @unhead/addons

# yarn
yarn add @unhead/addons

# pnpm
pnpm add @unhead/addons

Usage

Vite Plugin

import UnheadVite from '@unhead/addons/vite'
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnheadVite({
      // Options
    })
  ]
})

Webpack Plugin

// webpack.config.js
const UnheadWebpack = require('@unhead/addons/webpack')

module.exports = {
  plugins: [
    UnheadWebpack({
      // Options
    })
  ]
}

Options

interface UnpluginOptions {
  // Tree-shake server-only composables from client bundles
  treeshakeServerComposables?: boolean | TreeshakeServerComposablesOptions

  // Transform useSeoMeta calls for better performance
  useSeoMetaTransform?: boolean | UseSeoMetaTransformOptions
}

Build Optimizations

Tree-shake Server Composables

Automatically removes server-only Unhead composables from client bundles:

// Before (in client bundle):
import { useServerHead } from '@unhead/vue'

useServerHead({ /* ... */ })

// After (removed from client bundle):
// (code is completely removed)

SEO Meta Transform

Optimizes useSeoMeta calls for better performance:

// Before:
useSeoMeta({
  title: 'My Page',
  description: 'Page description'
})

// After (optimized):
useHead({
  title: 'My Page',
  meta: [{ name: 'description', content: 'Page description' }]
})

Documentation

Visit the Unhead documentation for more details.

License

MIT