Vite Plugin · Unhead [Unhead Home](https://unhead.unjs.io/ "Home") - [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Tools](https://unhead.unjs.io/tools) - [Learn](https://unhead.unjs.io/learn/guides/what-is-capo) [Releases](https://unhead.unjs.io/releases) Search…```k`` /` [Unhead on GitHub](https://github.com/unjs/unhead) [User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) [API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview) Vue - [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/advanced/vite-plugin) - [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/advanced/vite-plugin) - [Switch to React](https://unhead.unjs.io/docs/react/head/guides/advanced/vite-plugin) - [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/advanced/vite-plugin) - [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/advanced/vite-plugin) - [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/advanced/vite-plugin) - [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/advanced/vite-plugin) v3 (beta) You're viewing **Unhead v3 beta** documentation. Head - [Discord Support](https://discord.com/invite/275MBUBvgP) - [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn) - Get Started - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) - [Installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation) - [Upgrade Guide](https://unhead.unjs.io/docs/vue/head/guides/get-started/migration) - Core Concepts - [Titles & Title Templates](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles) - [Tag Sorting & Placement](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/positions) - [Class & Style Attributes](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr) - [Inline Style & Scripts](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/inner-content) - [Tag Deduplication](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/handling-duplicates) - [DOM Event Handling](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling) - [Script Loading](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/loading-scripts) - [Context & Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context) - [ Component](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components) - [Options API](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) - [Pause DOM Rendering](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering) - [StreamingNew](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming) - Advanced - [Extending Unhead](https://unhead.unjs.io/docs/vue/head/guides/advanced/extending-unhead) - [Bundle Optimizations](https://unhead.unjs.io/docs/vue/head/guides/advanced/client-only-tags) - [Vite Plugin](https://unhead.unjs.io/docs/vue/head/guides/advanced/vite-plugin) - Plugins - [Template Params](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params) - [Alias Sorting](https://unhead.unjs.io/docs/vue/head/guides/plugins/alias-sorting) - [Canonical Plugin](https://unhead.unjs.io/docs/vue/head/guides/plugins/canonical) - [Infer SEO Meta](https://unhead.unjs.io/docs/vue/head/guides/plugins/infer-seo-meta-tags) - [Minify](https://unhead.unjs.io/docs/vue/head/guides/plugins/minify) - [Validate](https://unhead.unjs.io/docs/vue/head/guides/plugins/validate) Advanced # Vite Plugin [Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/2.advanced/9.vite-plugin.md) Last updated Apr 7, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [feat: `@unhead/bundler` and `/vite` subpath exports (#726)](https://github.com/unjs/unhead/pull/726). On this page - [Setup](#setup) - [What Does It Do?](#what-does-it-do) - [Options](#options) - [Streaming SSR](#streaming-ssr) - [Webpack](#webpack) - [See Also](#see-also) **Quick Answer:** Each framework package ships a unified Vite plugin at `@unhead/{framework}/vite` that handles build optimizations and optional streaming SSR. One import, one plugin call. ## [Setup](#setup) Install your framework's unhead package (if you haven't already), then add the plugin to your Vite config: Vue React Svelte Solid Nuxt (automatic) ``` import vue from '@vitejs/plugin-vue' import unhead from '@unhead/vue/vite' export default defineConfig({ plugins: [vue(), unhead()], }) ``` ``` import react from '@vitejs/plugin-react' import unhead from '@unhead/react/vite' export default defineConfig({ plugins: [react(), unhead()], }) ``` ``` import { svelte } from '@sveltejs/vite-plugin-svelte' import unhead from '@unhead/svelte/vite' export default defineConfig({ plugins: [unhead(), svelte()], }) ``` ``` 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()], }) ``` ``` // No configuration needed ``` ## [What Does It Do?](#what-does-it-do) The plugin performs several build-time optimizations automatically: - **Tree-shaking**: Removes server-only composables (`useServerHead`, `useServerSeoMeta`, `useSchemaOrg`) from client bundles - **`useSeoMeta` transform**: Converts `useSeoMeta()` calls into raw `useHead()` calls at build time (~3kb savings) - **Streaming SSR** (opt-in): Auto-injects streaming head components for SSR streaming support ## [Options](#options) ``` unhead({ // Disable server composable tree-shaking treeshake: false, // Disable useSeoMeta → useHead transform transformSeoMeta: false, // Enable streaming SSR streaming: true, // Streaming with custom mode streaming: { mode: 'inline' }, // Pre-minify inline script/style content minify: { js: createJSMinifier(), css: createCSSMinifier() }, // File filter (shared across all transforms) filter: { exclude: [/some-file/] }, }) ``` | Option | Type | Default | Description | | --- | --- | --- | --- | | `treeshake` | `object \| false` | enabled | Tree-shake server composables from client bundles | | `transformSeoMeta` | `object \| false` | enabled | Transform `useSeoMeta()` to `useHead()` | | `minify` | `object \| false` | disabled | Pre-minify static inline script/style. See [Minify Plugin](https://unhead.unjs.io/docs/head/guides/plugins/minify#build-time-minification) | | `streaming` | `true \| object \| false` | `false` | Enable streaming SSR support | | `filter` | `object` | — | Shared include/exclude file filter | Every option accepts `false` to disable it entirely, or an object to configure it. ## [Streaming SSR](#streaming-ssr) When enabled, the streaming plugin auto-injects `` components into your templates and sets up the hydration client: ``` unhead({ streaming: true }) // Or configure the streaming mode unhead({ streaming: { // 'async' (default) - non-blocking async script // 'inline' - inline IIFE in HTML head (larger HTML, immediate execution) // 'module' - ES module import (waits for bundle) mode: 'async', }, }) ``` ## [Webpack](#webpack) For Webpack projects, use `@unhead/bundler/webpack` directly: ``` import { UnheadWebpack } from '@unhead/bundler/webpack' export default { plugins: [UnheadWebpack()], } ``` ## [See Also](#see-also) - [Minify Plugin](https://unhead.unjs.io/docs/head/guides/plugins/minify) - Inline script/style minification - [Client-Only Tags](https://unhead.unjs.io/docs/head/guides/advanced/client-only-tags) - Bundle optimizations - [useHead() API](https://unhead.unjs.io/docs/head/api/composables/use-head) - Full API reference [Edit this page](https://github.com/unjs/unhead/edit/main/docs/head/1.guides/2.advanced/9.vite-plugin.md) [Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/head/1.guides/2.advanced/9.vite-plugin.md) Did this page help you? [Bundle Optimizations Reduce bundle size with client-only and server-only tags. Use mode option or import.meta guards for SSR/CSR optimization.](https://unhead.unjs.io/docs/head/guides/advanced/client-only-tags) [Template Params Dynamic placeholders like %s and %siteName in head tags. Define site name, separator, and custom variables for consistent branding.](https://unhead.unjs.io/docs/head/guides/plugins/template-params) On this page - [Setup](#setup) - [What Does It Do?](#what-does-it-do) - [Options](#options) - [Streaming SSR](#streaming-ssr) - [Webpack](#webpack) - [See Also](#see-also) [GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP) [ /llms.txt](https://unhead.unjs.io/llms.txt) [Part of the UnJS ecosystem](https://unjs.io/) ### Articles - [Announcing Unhead v2](https://unhead.unjs.io/releases/v2) ### Tools - [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator) - [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator) - [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator) ### Head - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview) - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead) - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes) ### Schema.org - [Introduction](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview) Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)