---
title: "Build Plugins"
description: "Unified Vite and webpack plugins for Unhead. Build optimizations, inline script transpilation, 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-08-11T00:41:27.121Z"
---

The Vue, React, Svelte, and Solid.js packages each ship a Vite plugin at `@unhead/{framework}/vite`. Solid.js uses the package name `@unhead/solid-js`.

## Setup

Install your framework's Unhead package, then add the plugin to your Vite config:

The build plugin needs a parser. Vite 8 includes Rolldown, so Unhead reuses
`rolldown/utils`. With Vite 6 or 7, webpack, Rspack, or Rollup, install the Oxc
fallback:

```bash
pnpm add -D oxc-parser
```

Projects that use Unhead only at runtime do not need to install a parser.

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

## Included transforms

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
- **Inline script transform**: Transpiles static inline scripts to Vite's configured browser target
- **Minify transform**: Optionally pre-minifies static inline script/style content in the same AST pass
- **Dev validation**: Auto-injects `ValidatePlugin` in dev so head tag warnings surface in the browser console (enabled by default)
- **DevTools**: Registers Unhead's Vite DevTools integration by default; the panel activates when Vite DevTools is enabled

## Options

```ts
Unhead({
  // Disable server composable tree-shaking
  treeshake: false,
  // Disable useSeoMeta → useHead transform
  transformSeoMeta: false,
  // Disable automatic inline script transpilation
  transformInlineScripts: 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>
        transformInlineScripts
      </code>
    </td>
    
    <td>
      <code>
        object | false
      </code>
    </td>
    
    <td>
      enabled
    </td>
    
    <td>
      Transpile static inline scripts to Vite's resolved <code>
        build.target
      </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>
      included
    </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>
      Unset
    </td>
    
    <td>
      Shared include/exclude file filter
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sourcemap
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Unset
    </td>
    
    <td>
      Enable sourcemap generation for transforms
    </td>
  </tr>
</tbody>
</table>

The three transforms accept `false` or an options object. `devtools` follows the same pattern, while `validate` and `sourcemap` are booleans and `filter` is an object.

Inline scripts inherit Vite's resolved `build.target`. Override it without
changing the target for the rest of the bundle:

```ts
Unhead({
  transformInlineScripts: { target: 'chrome77' },
})
```

## Other Bundlers

The Vue, React, Svelte, and Solid.js packages expose a unified `/bundler` entry with per-bundler methods:

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

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

The bundler entry also exposes `.rspack()` and `.rollup()`. Validation and DevTools injection are Vite-only. Rollup cannot infer whether it is building for the client or server, so target-dependent transforms remain conservative; use `.vite()` or `.webpack()` when you need target-aware optimization.

Inline script target inheritance is Vite-only. Rollup has no browser target contract. Unplugin provides the webpack and Rspack targets, but not their transpilers, so Unhead cannot apply those targets to an inline string. Existing explicit minifier configuration is unchanged.