Livewire & Inertia Overview

By the end of this lesson you will understand the two main ways to make Laravel pages feel fast and interactive: Livewire and Inertia. You will see the same small feature built with each, and you will be able to pick the right one for a project.

Why plain Blade is sometimes not enough

A normal Blade page works like a printed bill. Every time something changes, the server prints a whole new page and the browser reloads. For forms and lists, that is fine. For a search box that should filter results as you type, a full reload feels slow.

The classic answer was to write a separate JavaScript app (React or Vue) plus a JSON API. That works, but now you maintain two projects: routes, validation and logins on both sides. For a small team in Jaipur building an admin panel, that is a lot of work.

Livewire and Inertia both solve this problem, from opposite directions:

Both are used by the official Laravel starter kits, which you will meet in Authentication with Starter Kits.

Livewire: interactive pages in PHP

Livewire lets you write a component as a PHP class plus a Blade template. When the user types or clicks, a small script in the browser sends the change to the server. The server re-runs your PHP, renders the new HTML and the script swaps in only the parts that changed.

An analogy: a waiter at a dhaba. You do not walk into the kitchen. You tell the waiter "one more roti", the kitchen makes it, and the waiter brings only that roti, not a whole new thali.

Step 1. Install Livewire with Composer.

composer require livewire/livewire

Step 2. Create a component. In Livewire 4 the default is a single-file component: the PHP class and the Blade markup live in one .blade.php file. Add --class if you prefer the older style with a separate class in app/Livewire.

php artisan make:livewire fee-search

Step 3. Write the component. This one searches students by name and shows their pending fee.

<?php

use App\Models\Student;
use Livewire\Component;

new class extends Component
{
    public string $search = '';

    public function with(): array
    {
        return [
            'students' => Student::where('name', 'like', "%{$this->search}%")
                ->orderBy('name')
                ->limit(10)
                ->get(),
        ];
    }
};
?>

<div>
    <input type="search" wire:model.live="search" placeholder="Search by name">

    <ul>
        @foreach ($students as $student)
            <li>{{ $student->name }}: ₹{{ number_format($student->fee_due) }} due</li>
        @endforeach
    </ul>
</div>

The key line is wire:model.live="search". It connects the input box to the public $search property. Without .live, Livewire 4 sends the value only when a form is submitted or an action runs; with .live, it updates as the user types.

Step 4. Place the component in any Blade view with a tag.

<livewire:fee-search />

What you see: a search box. Type "Pri" and the list changes to show Priya and Prisha without a page reload. Open the browser's Network tab and you will see small requests going to the server on each change.

Other common directives are wire:click="save" to call a method on a button click and wire:submit="save" on a form.

Inertia: React, Vue or Svelte pages with Laravel routes

Inertia takes the other approach. Your pages are real React, Vue or Svelte components. But you do not build an API. A Laravel controller returns Inertia::render() with a page name and some data, called props. Inertia sends that data as JSON to the page component, and the browser swaps pages without a full reload.

An analogy: a school notice board with fixed frames. The frames (JS components) stay on the wall. The office (Laravel) only sends new paper notices (data) to slide into them.

Here is the controller side of the same fee search.

<?php

namespace App\Http\Controllers;

use App\Models\Student;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

class FeeSearchController extends Controller
{
    public function index(Request $request): Response
    {
        $search = (string) $request->query('search', '');

        return Inertia::render('FeeSearch', [
            'search' => $search,
            'students' => Student::where('name', 'like', "%{$search}%")
                ->orderBy('name')
                ->limit(10)
                ->get(['id', 'name', 'fee_due']),
        ]);
    }
}

The React page resources/js/pages/FeeSearch.tsx receives search and students as normal props and renders them. When the user types, it calls Inertia's router.get() with the new search text, and Laravel answers with fresh props. Links between pages use Inertia's Link component instead of <a>, so navigation stays fast.

Notice the important detail in the controller: get(['id', 'name', 'fee_due']). Inertia props are sent to the browser as JSON, and anyone can read them in the page source. Never pass a whole model with private columns, like phone numbers or internal notes, unless the user is allowed to see them.

How to choose

Ask three questions.

1. What does the team know? A team of PHP developers who know Blade will be productive in Livewire in days. A team that already writes React should pick Inertia.
2. How rich is the interface? Admin panels, forms, tables and dashboards suit Livewire well. Drag-and-drop editors, charts with heavy interaction or offline features suit a JS framework through Inertia.
3. Do you also need a mobile app? Neither tool gives you a public API. If an Android app also needs the data, you will build an API with Building APIs: Resources & Sanctum anyway.

For the coaching app in this course, the staff panel could use either. A Livewire search on the fee page is a quick win, while the separate mobile app uses the JSON API.

Common mistakes

• Putting secrets in public Livewire properties or Inertia props. Both end up in the browser. Load private data inside methods and pass only what the page needs.
• Using wire:model.live on every field. Each keystroke becomes a server request. Use plain wire:model for normal forms and .live only where instant feedback matters.
• Mixing Livewire and Inertia on the same pages. Pick one approach per project section. Mixing them doubles what the team must learn.
• Building an API you do not need. If only your own web pages use the data, Livewire or Inertia removes the need for an API layer.

Key points

• Livewire builds interactive pages with PHP classes and Blade; the server renders and the browser patches the HTML.
• Inertia lets you write React, Vue or Svelte pages while keeping Laravel routes and controllers, with no separate API.
• Livewire 4 creates single-file components by default; --class gives the older class-plus-view format.
• Inertia controllers return Inertia::render('Page', $props), and every prop is visible in the browser.
• Choose by team skills, interface needs and whether you also need a public API.

public string $phone = '';

<input type="tel" wire:model.live="phone" placeholder="Phone number">