Module 4: Livewire 3

The Livewire Paradigm

Livewire allows you to build dynamic interfaces without writing complex JavaScript. It renders HTML on the server and updates the DOM via AJAX requests automatically.

Livewire 3 introduces automatic script injection, Alpine.js bundling, and faster morphing.

Creating Components

php artisan make:livewire CreatePost

// app/Livewire/CreatePost.php
namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Rule;
use App\Models\Post;

class CreatePost extends Component
{
    #[Rule('required|min:5')] 
    public $title = '';

    #[Rule('required')]
    public $content = '';

    public function save()
    {
        $this->validate();

        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);

        $this->reset(); 
        session()->flash('status', 'Post created!');
    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

    
    @error('title') {{ $message }} @enderror

    
    @error('content') {{ $message }} @enderror

    Save
    
    @if (session('status'))
        
{{ session('status') }}
    @endif

Properties & Data Binding

• wire:model: Two-way data binding. Livewire 3 defers updates by default (like .lazy in v2). Use .live for real-time updates.
• wire:click: Bind click events to PHP methods.

Form Objects

Extract form logic into dedicated classes to keep components clean.

// app/Livewire/Forms/PostForm.php
use Livewire\Form;
use Livewire\Attributes\Rule;

class PostForm extends Form
{
    #[Rule('required')]
    public $title = '';

    #[Rule('required')]
    public $content = '';
}

// Component
class CreatePost extends Component
{
    public PostForm $form;

    public function save()
    {
        $this->form->validate();
        Post::create($this->form->all());
    }
}

Volt (Functional API)

Volt allows you to write single-file components, similar to React or Vue SFCs.

 '']);

$save = function () {
    Post::create(['title' => $this->title]);
};

?>


    

        
        Save