Laravel Livewire: Building Dynamic UIs

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

Installation

composer require livewire/livewire
Copy

Creating Components

php artisan make:livewire Counter
Copy

This creates:

• app/Http/Livewire/Counter.php
• resources/views/livewire/counter.blade.php

Component Class

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
Copy

Component View

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>
Copy

Using Components

@livewire('counter')

<!-- Or with Blade directive -->
<livewire:counter />
Copy

Real-time Features

// Real-time validation
public function updatedEmail()
{
    $this->validate(['email' => 'email']);
}

// File uploads
public function save()
{
    $this->validate([
        'photo' => 'image|max:1024',
    ]);

    $this->photo->store('photos');
}
Copy

Livewire brings the power of modern JavaScript frameworks to Laravel!