Livewire 3: Real-Time PHP Without Writing JavaScript

Overview

Building interactive Blazor-like interfaces in PHP with Livewire 3, Alpine.js, and real-time performance tips.

Livewire 3 Architecture

Livewire 3 is a complete rewrite that uses Morphdom for efficient DOM diffing and a new request lifecycle that dramatically reduces latency. The result feels as fast as a JavaScript framework with the simplicity of PHP.

Like Blazor Server, Livewire sends diffs over the wire rather than full page reloads. An average interaction involves less than 1KB of network data.

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

    #[Computed]
    public function users()
    {
        return User::where('name', 'like', "%{$this->search}%")
            ->paginate(10);
    }

    public function render()
    {
        return view('livewire.user-search');
    }
}

Alpine.js for Client-Side Interactivity

Livewire 3 ships with tight Alpine.js integration. Use Alpine for UI-only state (dropdowns, modals, tabs) and Livewire for server-touching operations. This separation keeps your server round-trips minimal.

<!-- Alpine for client-side, Livewire for server -->
<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open" wire:ignore>
        <!-- Client-side only content -->
    </div>
    <button wire:click="save">Save to DB</button>
</div>

Key Takeaways

• Livewire 3 is a full rewrite—faster and more capable than v2
• Use Alpine for UI-only state to minimise server requests
• #[Computed] properties are cached within a request
• Use wire:lazy for expensive operations
• Livewire works seamlessly with Tailwind and Laravel Folio