By name: inertia-adonisjs description: Build AdonisJS 6 + Inertia.js (React) applications from scratch through production. Full lifecycle - setup, pages, forms, shared data, debugging.
Inertia is a bridge between AdonisJS and React. You keep server-side routing and controllers, while the client swaps page components without full reloads.
1. Server-Driven Pages
Controllers render Inertia responses with props:
return ctx.inertia.render("users/show", { user: new UserDto(user) });
2. No Client-Side Routing
Routes live in start/routes.ts. Inertia intercepts links and form submissions, making XHR requests and swapping components.
3. DTOs for Props
Props are sent to the client. Use DTOs to control the shape and avoid leaking fields.
4. Validation at the Edge
Validate on the server with VineJS. Let the validator throw and let Inertia handle the errors.
- Set up Inertia in AdonisJS
- Create a new page/component
- Build a form with validation
- Debug an Inertia issue
- Something else
Then read the matching workflow from workflows/ and follow it.
- Does the page render? Check for
X-Inertiaresponse header - Are props received?
console.log(usePage().props) - Does navigation work? Links should not full-reload
- Do forms submit? Check Network tab for XHR requests
- Are errors displayed? Trigger validation failure
// Frontend debug
console.log(usePage().props);
Report to the user:
- "Inertia response: ok"
- "Props received: X keys"
- "Navigation: SPA mode ok"
All in references/:
Core: setup.md, responses.md, forms.md, validation.md Data Flow: shared-data.md, links.md Quality: testing.md Cookbook: cookbook.md
All in workflows/:
| File | Purpose |
|---|---|
| setup-inertia.md | Install and configure Inertia for AdonisJS |
| create-page.md | Build new pages with props |
| build-form.md | Forms with validation and useForm |
| debug-inertia.md | Find and fix Inertia issues |