Inertia.js

Modern monolith framework for building SPAs without APIs. Combine server-side framework power with React/Vue/Svelte frontends.

Core Concept

Inertia replaces your view layer - controllers return JavaScript page components instead of server-side templates. The <Link> component intercepts clicks for XHR visits, providing SPA experience without full page reloads.

Quick Reference

Basic Page Structure

<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'
defineProps({ user: Object })
</script>

<template>
    <Layout>
        <Head title="Welcome" />
        <h1>Welcome {{ user.name }}</h1>
    </Layout>
</template>

Navigation

<Link href="/users">Users</Link>
<Link href="/logout" method="post" as="button">Logout</Link>
<Link href="/search" :data="{ query }" preserve-state>Search</Link>

Form Submission

<!-- Simple Form Component -->
<Form action="/users" method="post">
    <input type="text" name="name" />
    <button type="submit">Create</button>
</Form>

<!-- useForm Hook -->
<script setup>
import { useForm } from '@inertiajs/vue3'
const form = useForm({ name: '', email: '' })
function submit() { form.post('/users') }
</script>

Documentation by Topic

Topic	Reference File	Description
Forms	forms.md	Form component, useForm helper, validation, error handling
Links & Navigation	links.md	Link component, manual visits, active states
Validation	validation.md	Server-side validation, error bags, error display
Pages & Layouts	pages-layouts.md	Page components, persistent layouts, default layouts
Data & Props	data-props.md	Shared data, partial reloads, deferred props
Authentication	authentication.md	Auth patterns, CSRF protection, authorization
Setup	setup.md	Client-side initialization, server-side setup
Advanced	advanced.md	Events, error handling, scroll management, SSR

Common Patterns

Displaying Validation Errors

<div v-if="errors.email">{{ errors.email }}</div>

Accessing Shared Data

<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
const user = computed(() => page.props.auth?.user)
</script>

Preserving State/Scroll

<Link href="/form" preserve-state preserve-scroll>Edit</Link>

Partial Reloads

<Link :only="['users']">Refresh Users</Link>
router.visit('/users', { only: ['users'] })

Framework Support

Client: Vue 3 (@inertiajs/vue3), React (@inertiajs/react), Svelte (@inertiajs/svelte)
Server: Laravel (official), Rails, Phoenix, Symfony (community adapters)

inertia