Inline Code Transform

Quick Answer: Static inline scripts inside useHead() inherit Vite's configured build.target. The same AST pass can optionally minify script and style strings using rolldown, esbuild, or lightningcss.

Inline Script Transpilation

Inline scripts are HTML strings, so the normal application bundling pipeline cannot see the JavaScript inside them. The Unhead build plugin finds static innerHTML and textContent values and runs them through Vite's JavaScript transform using the resolved browser target:

Transpilation is available only through the Vite integration. webpack, Rspack, and Rollup leave inline script syntax unchanged, while configured JavaScript and CSS minifiers still run.

import { Unhead } from '@unhead/vue/vite'

export default defineConfig({
  build: {
    target: 'chrome77',
  },
  plugins: [Unhead()],
})

useHead(unheadInstance, {
  script: [{
    textContent: 'window.theme = storage?.theme ?? "light"',
  }],
})

The inline script now uses the same target as the application bundle.

To override the target only for inline scripts, or opt out entirely:

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

Only static string and expression-free template literals can be transformed at build time. Dynamic strings remain unchanged. Scripts with a JavaScript MIME type, type="module", an empty type, or no type are eligible. Other script types are data blocks and remain unchanged. If Vite cannot safely transform a script for the configured target, the build fails instead of shipping code that violates that target.

Nuxt's app.head configuration and HTML inserted from Nitro render hooks are created outside the Vite application module graph, so this transform cannot process them. Module authors should use onPrehydrate for pre-hydration code or ship script text that already supports their minimum browser target.

Minification

The transform finds innerHTML and textContent properties on script and style objects inside useHead() calls, then minifies them at build time:

useHead(unheadInstance, {
  script: [{
    innerHTML: `
      // Analytics initialization
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
    `,
  }],
})

useHead(unheadInstance, {
  script: [{
    innerHTML: "window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag(\"js\",new Date)",
  }],
})

The transform minifies application/json, application/ld+json, speculationrules, and importmap script types with Unhead's built-in JSON minifier. It ignores strings shorter than 20 characters and dynamic content, including template literals with expressions. JavaScript transpilation has no minimum length.

Setup

Minification is disabled by default. Enable it by providing minifier functions:

import { Unhead } from '@unhead/vue/vite'
import { createJSMinifier } from '@unhead/bundler/minify/rolldown'
import { createCSSMinifier } from '@unhead/bundler/minify/lightningcss'

export default defineConfig({
  plugins: [
    Unhead({
      minify: {
        js: createJSMinifier(),
        css: createCSSMinifier(),
      },
    }),
  ],
})

Available Minifier Backends

Options

Unhead({
  minify: {
    // Custom JS minifier, or false to disable
    js: createJSMinifier(),
    // Custom CSS minifier, or false to disable
    css: createCSSMinifier(),
    // Override the shared file filter
    filter: {
      include: [/my-special-file/],
      exclude: [/some-file/],
    },
  },
})

Custom Minifiers

You can provide any async function that takes a string and returns the minified result (or null to skip):

Unhead({
  minify: {
    js: async (code) => {
      const result = await myMinifier(code)
      return result.code
    },
  },
})

Runtime Minification

For runtime SSR minification (not build-time), see the Minify Plugin. The runtime plugin uses lightweight pure-JS minifiers suitable for edge and serverless environments.