GlosarioFrontend

¿Qué es Inertia.js?

Inertia.js es un adaptador que permite construir aplicaciones SPA modernas con Laravel en el backend y Vue.js, React o Svelte en el frontend, sin necesidad de crear una API REST separada.

Inertia.js

Inertia.js permite crear aplicaciones de pagina unica (SPA) usando frameworks frontend como Vue.js, React o Svelte, mientras se mantiene el routing y los controladores de Laravel en el backend. No necesitas crear una API.

Flujo de trabajo

// Controlador Laravel (igual que siempre)
class PostController extends Controller
{
    public function index(): \Inertia\Response
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::with('author')
                ->latest()
                ->paginate(10),
            'filters' => request()->only(['search', 'category']),
        ]);
    }

    public function store(StorePostRequest $request): RedirectResponse
    {
        Post::create($request->validated());

        return redirect()->route('posts.index')
            ->with('success', 'Post creado correctamente.');
    }
}

Componente Vue.js

<script setup>
import { Head, Link, router } from '@inertiajs/vue3'

defineProps({
    posts: Object,
    filters: Object,
})
</script>

<template>
    <Head title="Posts" />
    <div v-for="post in posts.data" :key="post.id">
        <Link :href="route('posts.show', post)">{{ post.title }}</Link>
    </div>
</template>

Inertia maneja automaticamente la navegacion del lado del cliente, conserva el scroll, gestiona formularios y proporciona una experiencia SPA completa. Es la base de Laravel Breeze y Jetstream con stack Inertia.

LivewireSanctum