Litestar Vite¶

Supercharge your Litestar applications with Vite’s modern frontend tooling. Litestar-Vite seamlessly integrates Vite - the next generation frontend build tool - with your Litestar web applications.

Getting Started

Quick start guide for integrating Vite with Litestar

Usage

Frameworks

React, Vue, Svelte, Angular, Inertia.js, and HTMX

Framework Examples

API Reference

Complete API documentation

API Reference

Examples

View example projects

https://github.com/litestar-org/litestar-vite/tree/main/examples

Key Features¶

Lightning-fast HMR

Get instant feedback with Vite’s blazing fast Hot Module Replacement during development

Zero Config

Works out of the box with sensible defaults - no complex setup required

Asset Management

Automatically serves your static files and handles asset manifests in production

Development Mode

Integrated dev server with automatic proxy configuration for seamless development

Production Ready

Optimized asset serving for production builds with versioned URLs and caching

Inertia.js Support

Build modern single-page applications with server-side routing using Inertia.js

See it in Action¶

Project Scaffolding

Quickly scaffold a new project with your preferred frontend framework:

Create a new Litestar + Vite project with React, Vue, Svelte, or HTMX

Hot Module Replacement

Experience instant feedback during development with HMR:

Changes to your frontend code are reflected instantly without page reload

Installation¶

Installing litestar-vite is as easy as calling your favorite Python package manager:

pip

Using pip¶

python3 -m pip install litestar-vite

Using uv¶

uv add litestar-vite

pdm

Using PDM¶

pdm add litestar-vite

Poetry

Using Poetry¶

poetry add litestar-vite

npm (TypeScript Library)

For the TypeScript/JavaScript library¶

npm install @litestar/vite-plugin

Quick Start¶

Here’s a minimal example to get you started:

app.py¶

from pathlib import Path
from litestar import Litestar, get
from litestar.contrib.jinja import JinjaTemplateEngine
from litestar.template.config import TemplateConfig
from litestar_vite import ViteConfig, VitePlugin

@get("/")
async def index() -> str:
    return "index.html"

vite = VitePlugin(
    config=ViteConfig(
        bundle_dir=Path("public"),
        resource_dir=Path("resources"),
    )
)

app = Litestar(
    route_handlers=[index],
    plugins=[vite],
    template_config=TemplateConfig(
        directory=Path("templates"),
        engine=JinjaTemplateEngine,
    ),
)

Then in your template:

templates/index.html¶

<!DOCTYPE html>
<html>
<head>
    {{ vite_hmr() }}
    {{ vite('resources/main.ts') }}
</head>
<body>
    <div id="app"></div>
</body>
</html>

Run your app with litestar run and start developing!

Why Litestar Vite?¶

Modern Development Experience: Vite provides an incredibly fast development server with HMR that makes frontend development a joy. Litestar-Vite brings this experience seamlessly to your Litestar applications.
Framework Flexibility: Use any frontend framework you prefer - React, Vue, Svelte, vanilla JS, or even HTMX. The plugin works with all of them.
Production Optimized: Automatic asset versioning, code splitting, and optimized bundles ensure your production deployment is fast and efficient.
Inertia.js Integration: Build modern SPAs without the complexity of a separate API layer. Server-side routing meets client-side rendering with full TypeScript support.

Architecture¶

        flowchart LR
    A[Litestar App] --> B[VitePlugin]
    B --> C{Mode?}
    C -->|Development| D[Vite Dev Server]
    C -->|Production| E[Asset Manifest]
    D --> F[HMR WebSocket]
    E --> G[Versioned Assets]
    F --> H[Browser]
    G --> H