Build Plugins

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:

pnpm add -D oxc-parser

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

import vue from '@vitejs/plugin-vue'
import { Unhead } from '@unhead/vue/vite'

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

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

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/] },
})

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:

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

Other Bundlers

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

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.