---
title: "Inline Code Transform"
description: "Transpile static inline scripts and optionally minify static inline script and style content inside useHead() calls at build time."
canonical_url: "https://unhead.unjs.io/docs/head/guides/build-plugins/minify-transform"
last_updated: "2026-08-11T00:40:28.035Z"
---

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

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

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

```ts [Source]
useHead({
  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:

```ts
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:

<code-group>

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

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

</code-group>

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:

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

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      Function
    </th>
    
    <th>
      Use case
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        @unhead/bundler/minify/rolldown
      </code>
    </td>
    
    <td>
      <code>
        createJSMinifier()
      </code>
    </td>
    
    <td>
      JS minification (Vite 8+)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @unhead/bundler/minify/esbuild
      </code>
    </td>
    
    <td>
      <code>
        createJSMinifier()
      </code>
    </td>
    
    <td>
      JS minification (Vite 7)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @unhead/bundler/minify/lightningcss
      </code>
    </td>
    
    <td>
      <code>
        createCSSMinifier()
      </code>
    </td>
    
    <td>
      CSS minification
    </td>
  </tr>
</tbody>
</table>

## Options

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

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

<tbody>
  <tr>
    <td>
      <code>
        js
      </code>
    </td>
    
    <td>
      <code>
        false | MinifyFn
      </code>
    </td>
    
    <td>
      Unset
    </td>
    
    <td>
      JS minifier function, or <code>
        false
      </code>
      
       to disable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        css
      </code>
    </td>
    
    <td>
      <code>
        false | MinifyFn
      </code>
    </td>
    
    <td>
      Unset
    </td>
    
    <td>
      CSS minifier function, or <code>
        false
      </code>
      
       to disable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter
      </code>
    </td>
    
    <td>
      <code>
        object
      </code>
    </td>
    
    <td>
      inherited
    </td>
    
    <td>
      Include/exclude file patterns (overrides the shared <code>
        filter
      </code>
      
      )
    </td>
  </tr>
</tbody>
</table>

### Custom Minifiers

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

```ts
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](/docs/head/guides/plugins/minify). The runtime plugin uses lightweight pure-JS minifiers suitable for edge and serverless environments.