The Inertia.js Paradigm Shift

Inertia.js allows building single-page Vue 3 applications without writing complex REST APIs or client-side routers. Laravel controllers return Inertia render calls containing props directly into Vue views.

Controller Implementation

namespace App\Http\Controllers;

use Inertia\Inertia;
use App\Models\Post;

class BlogController extends Controller
{
    public function index()
    {
        return Inertia::render('Blog/Index', [
            'posts' => Post::with('category')->latest()->paginate(10),
        ]);
    }
}

Vue 3 Component Consumer

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

<template>
  <div class="max-w-4xl mx-auto py-8">
    <h1 class="text-3xl font-bold mb-6">Latest Blog Articles</h1>
    <div v-for="post in posts.data" :key="post.id" class="mb-4 p-4 border rounded">
      <h2 class="text-xl font-semibold">{{ post.title }}</h2>
      <p class="text-gray-600">{{ post.resume }}</p>
    </div>
  </div>
</template>

With Inertia.js, developers retain Laravel\'s authentication, routing, and ORM power while offering users smooth client-side SPA navigation.