---
title: "Build Plugins"
description: "Unified Vite and Webpack plugins for Unhead. Build optimizations, tree-shaking, and useSeoMeta transforms in a single plugin call."
canonical_url: "https://unhead.unjs.io/docs/head/guides/build-plugins/overview"
last_updated: "2026-06-30T06:50:04.074Z"
---

**Quick Answer:** Each framework package ships a unified Vite plugin at `@unhead/{framework}/vite` that handles build optimizations. One import, one plugin call.

## Setup

Install your framework's unhead package (if you haven't already), then add the plugin to your Vite config:

<framework-code>
<template v-slot:vue="">

```ts [vite.config.ts]
import vue from '@vitejs/plugin-vue'
import { Unhead } from '@unhead/vue/vite'

export default defineConfig({
  plugins: [vue(), Unhead()],
})
```

</template>

<template v-slot:react="">

```ts [vite.config.ts]
import react from '@vitejs/plugin-react'
import { Unhead } from '@unhead/react/vite'

export default defineConfig({
  plugins: [react(), Unhead()],
})
```

</template>

<template v-slot:svelte="">

```ts [vite.config.ts]
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { Unhead } from '@unhead/svelte/vite'

export default defineConfig({
  plugins: [Unhead(), svelte()],
})
```

</template>

<template v-slot:solid="">

```ts [vite.config.ts]
import solid from 'vite-plugin-solid'
import { Unhead } from '@unhead/solid-js/vite'

export default defineConfig({
  // Must come before solid() to see JSX before compilation
  plugins: [Unhead(), solid()],
})
```

</template>

<template v-slot:nuxt="">

```ts
// No configuration needed
```

</template>
</framework-code>

## What Does It Do?

The plugin combines several build-time optimizations:

- **Tree-shaking**: Removes deprecated server composables and `useSchemaOrg` calls from client bundles
- **useSeoMeta transform**: Converts `useSeoMeta()` calls into raw `useHead()` calls at build time (~3kb savings)
- **Minify transform**: Pre-minify static inline script/style content at build time
- **Dev validation**: Auto-injects `ValidatePlugin` in dev so head tag warnings surface in the browser console (enabled by default)
- **Devtools**: Inspect head tags, entries, and SEO metadata in Vite DevTools (dev only, enabled by default)

## Options

```ts
Unhead({
  // Disable server composable tree-shaking
  treeshake: false,
  // Disable useSeoMeta → useHead transform
  transformSeoMeta: false,
  // Pre-minify inline script/style content
  minify: { js: createJSMinifier(), css: createCSSMinifier() },
  // File filter (shared across all transforms)
  filter: { exclude: [/some-file/] },
})
```

<table>
<thead>
  <tr>
    <th>
      Option
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        treeshake
      </code>
    </td>
    
    <td>
      <code>
        object | false
      </code>
    </td>
    
    <td>
      enabled
    </td>
    
    <td>
      <a href="/docs/head/guides/build-plugins/tree-shaking">
        Tree-shake server composables
      </a>
      
       from client bundles
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        transformSeoMeta
      </code>
    </td>
    
    <td>
      <code>
        object | false
      </code>
    </td>
    
    <td>
      enabled
    </td>
    
    <td>
      <a href="/docs/head/guides/build-plugins/seo-meta-transform">
        Transform <code>
          useSeoMeta()
        </code>
      </a>
      
       to <code>
        useHead()
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        minify
      </code>
    </td>
    
    <td>
      <code>
        object | false
      </code>
    </td>
    
    <td>
      disabled
    </td>
    
    <td>
      <a href="/docs/head/guides/build-plugins/minify-transform">
        Pre-minify static inline script/style
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        validate
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      enabled
    </td>
    
    <td>
      Auto-inject <code>
        ValidatePlugin
      </code>
      
       in dev for head tag warnings
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        devtools
      </code>
    </td>
    
    <td>
      <code>
        object | false
      </code>
    </td>
    
    <td>
      enabled
    </td>
    
    <td>
      <a href="/docs/head/guides/build-plugins/devtools">
        Vite DevTools integration
      </a>
      
       (dev only)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter
      </code>
    </td>
    
    <td>
      <code>
        object
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Shared include/exclude file filter
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sourcemap
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Enable sourcemap generation for transforms
    </td>
  </tr>
</tbody>
</table>

Every option accepts `false` to disable it entirely, or an object to configure it.

## Other Bundlers

Framework packages expose a unified bundler entry with per-bundler methods:

```ts
import { Unhead } from '@unhead/vue/bundler'

export default {
  plugins: Unhead().webpack(),
}
```