Vite Plugin

The @stratal/inertia/vite package provides the stratalInertia() plugin, which handles TypeScript type generation for page components, CSS injection during SSR development, client-side SEO head sync, and inlining the client manifest into the worker bundle.

Basic setup

stratalInertia() returns an array of plugins, so spread it into your plugins list:

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import { stratalInertia } from '@stratal/inertia/vite'

export default defineConfig({
  plugins: [
    cloudflare(),
    ...stratalInertia(),
  ],
})

Tip

When you run npx quarry inertia:dev or npx quarry inertia:build, a Vite config is generated for you with stratalInertia() and the Cloudflare plugin pre-wired. You only need your own vite.config.ts when you want extra Vite plugins or custom configuration.

What it includes

The stratalInertia() plugin bundles several sub-plugins:

Sub-plugin	Purpose
stratalInertiaTypes	Regenerates the InertiaPageRegistry types from your ctx.inertia() calls and page components on build and during HMR.
stratalInertiaDevCss	Injects CSS during development so styles are applied correctly before hydration when SSR is active.
SEO runtime injector	Prepends the @stratal/inertia/seo-runtime side-effect import to your client entry so backend ctx.seo() metadata stays in sync across Inertia navigations. No app wiring required.
Manifest injector	During the worker build, inlines the client Vite manifest onto the worker entry chunk so ManifestService can resolve hashed asset URLs at runtime (Workers have no filesystem).

These run automatically and require no separate configuration.

Plugin options

stratalInertia({
  entries: ['/src/inertia/app.tsx'],
  sourcemap: 'dev-and-staging',
  clientManifestPath: 'dist/client/.vite/manifest.json',
})

Option	Type	Default	Description
entries	string[]	['/src/inertia/app.tsx']	Client entry paths used for CSS collection and SEO-runtime injection. Adjust if your entry lives elsewhere.
sourcemap	boolean | 'dev-and-staging'	'dev-and-staging'	Whether to emit sourcemaps in vite build. 'dev-and-staging' emits them unless CLOUDFLARE_ENV is prod or production, keeping production worker uploads small.
clientManifestPath	string	'dist/client/.vite/manifest.json'	Path (relative to project root) to the client manifest produced by the browser-bundle build phase. The worker build inlines it onto the worker entry chunk.

Note

A per-app build.sourcemap set in your own vite.config.ts always wins over the plugin’s sourcemap option.

Using npx quarry inertia:dev

The recommended way to develop Inertia applications is with the Inertia CLI:

npx quarry inertia:dev

This starts the Vite dev server with the Stratal Inertia plugins and the Cloudflare plugin pre-configured. HMR, type generation, CSS handling, and SEO head sync all work out of the box without a vite.config.ts file.

Common flags:

npx quarry inertia:dev --port=5173 --host --persist-to=.cf-state

Manual Vite config for advanced setups

If you need additional Vite plugins or custom configuration, create a vite.config.ts in your project root. When one is present, both inertia:dev and inertia:build merge it with the generated base config:

With Tailwind

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import { stratalInertia } from '@stratal/inertia/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    cloudflare(),
    tailwindcss(),
    ...stratalInertia(),
  ],
})

Custom entry

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'
import { stratalInertia } from '@stratal/inertia/vite'

export default defineConfig({
  plugins: [
    cloudflare(),
    ...stratalInertia({
      entries: ['/src/inertia/main.tsx'],
    }),
  ],
})

Production build

npx quarry inertia:build

The build runs in two phases: it builds the browser bundle and its manifest first, then builds the worker, inlining that manifest so the deployed Worker can resolve hashed asset URLs without a filesystem. Add --ssr to include the streaming SSR bundle.