Type Generation¶

Litestar Vite includes a type generation system that keeps your frontend in sync with your Python backend.

Overview¶

The type generation pipeline:

Exports your Litestar OpenAPI schema.
Generates TypeScript interfaces using @hey-api/openapi-ts.
Extracts route metadata from your application.
Generates a typed route() helper for type-safe URL generation.

Configuration¶

Enable type generation in your ViteConfig:

from litestar_vite.config import TypeGenConfig

VitePlugin(
    config=ViteConfig(
        types=TypeGenConfig(
            enabled=True,
            output_dir="src/lib/api",
        )
    )
)

Or use the shortcut:

VitePlugin(config=ViteConfig(types=True))

Usage in Frontend¶

Import the generated types and route helper:

import { route, serverRoutes } from './lib/api/routes';
import type { User } from './lib/api/types.gen';

// Type-safe URL generation
const url = route('users.show', { id: 123 });

// Access the typed route map (alias of routes)
const apiBase = serverRoutes['users.show'];

// window.serverRoutes is also typed when route metadata is injected
window.serverRoutes?.['users.show'];

// Type-safe API calls
const response = await fetch(url);
const user: User = await response.json();

Commands¶

You can manually trigger type generation:

litestar assets generate-types