Skip to content

Latest commit

 

History

History
82 lines (60 loc) · 3.44 KB

README.md

File metadata and controls

82 lines (60 loc) · 3.44 KB

Litestar Vite

Litestar Vite connects the Litestar backend to a Vite toolchain. It supports SPA, Template, Inertia, and meta-framework workflows, and it can proxy Vite dev traffic through your ASGI port or run Vite directly.

Features

  • One-port dev: proxies Vite HTTP + WS/HMR through Litestar by default; switch to two-port with VITE_PROXY_MODE=direct.
  • Framework-mode support: use mode="framework" (alias mode="ssr") for Astro, Nuxt, and SvelteKit. Litestar proxies everything except your API routes.
  • Production assets: reads the Vite manifest from public/manifest.json (configurable) and serves under asset_url.
  • Type-safe frontends: optional OpenAPI/routes export plus @hey-api/openapi-ts via the Vite plugin.
  • Inertia support: stable v2 protocol with session middleware, optional script-element bootstrap, and optional SSR.

Install

pip install litestar-vite
npm install litestar-vite-plugin

Quick Start

import os
from pathlib import Path
from litestar import Litestar
from litestar_vite import PathConfig, ViteConfig, VitePlugin

DEV_MODE = os.getenv("VITE_DEV_MODE", "true").lower() in ("true", "1", "yes")

app = Litestar(
    plugins=[VitePlugin(config=ViteConfig(
        dev_mode=DEV_MODE,
        paths=PathConfig(root=Path(__file__).parent),
    ))]
)
litestar assets init --template vue
litestar assets install
litestar run --reload

Documentation

  • Usage Guide: Core concepts, configuration, and type generation.
  • Inertia: Fullstack protocols and SSR.
  • Frameworks: Guides for React, Vue, Svelte, Angular, Astro, and Nuxt.
  • Reference: API and CLI documentation.

For a full list of changes, see the Changelog.

Common Commands

  • litestar assets init --template <name>: scaffold a frontend or framework app
  • litestar assets install: install frontend dependencies with the configured executor
  • litestar assets build: build production assets
  • litestar assets serve: run the frontend toolchain directly
  • litestar assets generate-types: export OpenAPI, routes, and Inertia page-prop metadata
  • litestar assets doctor: inspect and optionally repair config drift

Development

# Install Python, docs, and JS dependencies; build package artifacts
make install && make build

# Run an example app
uv run litestar --app-dir examples/vue-inertia assets install
uv run litestar --app-dir examples/vue-inertia run

Replace vue-inertia with any other example app: vue, react, svelte, react-inertia, htmx, angular, astro, nuxt, or sveltekit.

For Inertia script-element bootstrap, enable InertiaConfig(use_script_element=True) on the Python side and keep createInertiaApp({ defaults: { future: { useScriptElementForInitialPage: true } } }) aligned in the browser entry and SSR entry when ssr=True is enabled.

Links