---
title: Inline Code Transform
description: Transpile static inline scripts and optionally minify static inline script and style content inside useHead() calls at build time.
navigation.title: 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.

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

::

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

| Package | Function | Use case |
| --------- | ---------- | ---------- |
| `@unhead/bundler/minify/rolldown` | `createJSMinifier()` | JS minification (Vite 8+) |
| `@unhead/bundler/minify/esbuild` | `createJSMinifier()` | JS minification (Vite 7) |
| `@unhead/bundler/minify/lightningcss` | `createCSSMinifier()` | CSS minification |

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

| Option | Type | Default | Description |
| -------- | ------ | --------- | ------------- |
| `js` | `false \| MinifyFn` | Unset | JS minifier function, or `false` to disable |
| `css` | `false \| MinifyFn` | Unset | CSS minifier function, or `false` to disable |
| `filter` | `object` | inherited | Include/exclude file patterns (overrides the shared `filter`) |

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