Inertia.js

Inertia.js lets you build modern SPAs with server-side routing. No API layer needed - your Litestar routes return page components directly.

See also

For comprehensive documentation, see the Inertia.js section.

Supported Frameworks

  • React: litestar assets init --template react-inertia

  • Vue: litestar assets init --template vue-inertia

  • Svelte: litestar assets init --template svelte-inertia

Quick Start

from litestar import Litestar, get
from litestar_vite import ViteConfig, VitePlugin

@get("/", component="Home")
async def home() -> dict:
    return {"message": "Welcome!"}

@get("/users", component="Users")
async def users() -> dict:
    return {"users": [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]}

app = Litestar(
    route_handlers=[home, users],
    plugins=[
        VitePlugin(config=ViteConfig(dev_mode=True, inertia=True)),
    ],
)

Root Template

<!DOCTYPE html>
<html>
<head>
    {{ vite_hmr() }}
    {{ vite('resources/main.tsx') }}
</head>
<body>
    <div id="app" data-page="{{ inertia }}"></div>
</body>
</html>

React Entry Point

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";

const pages = import.meta.glob("./pages/**/*.tsx", { eager: true });

createInertiaApp({
  resolve: (name) => pages[`./pages/${name}.tsx`],
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Vue Entry Point

import { createInertiaApp } from "@inertiajs/vue3";
import { createApp, h } from "vue";

const pages = import.meta.glob("./pages/**/*.vue", { eager: true });

createInertiaApp({
  resolve: (name) => pages[`./pages/${name}.vue`],
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el);
  },
});

Learn More

Full Documentation

Configuration, helpers, responses, and more

Inertia.js
TypeScript Integration

Type-safe routes and page props

TypeScript Integration
Security

CSRF protection and history encryption

CSRF Protection
Examples

Production-ready fullstack template

https://github.com/litestar-org/litestar-fullstack-inertia

See Also