Laravel Livewire for reactive components

Carlos Mendez Jan 2026

2 tabs

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;
use Livewire\WithFileUploads;

class CreatePost extends Component
{
    use WithFileUploads;

    public $title = '';
    public $body = '';
    public $tags = [];
    public $image;

    protected $rules = [
        'title' => 'required|min:5|max:255',
        'body' => 'required|min:100',
        'tags' => 'array|max:5',
        'image' => 'nullable|image|max:2048',
    ];

    public function updated($propertyName)
    {
        // Validate on property update
        $this->validateOnly($propertyName);
    }

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

        $post = auth()->user()->posts()->create([
            'title' => $validated['title'],
            'body' => $validated['body'],
        ]);

        if ($this->image) {
            $post->addMedia($this->image->getRealPath())
                ->toMediaCollection('featured');
        }

        $post->tags()->sync($validated['tags']);

        session()->flash('message', 'Post created successfully!');

        return redirect()->route('posts.show', $post);
    }

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

<div>
    @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
    @endif

    <form wire:submit.prevent="save">
        <div>
            <label>Title</label>
            <input type="text" wire:model.lazy="title">
            @error('title') <span class="error">{{ $message }}</span> @enderror
        </div>

        <div>
            <label>Body</label>
            <textarea wire:model.debounce.500ms="body"></textarea>
            @error('body') <span class="error">{{ $message }}</span> @enderror
            <p>{{ strlen($body) }} characters</p>
        </div>

        <div>
            <label>Tags</label>
            <select wire:model="tags" multiple>
                @foreach($availableTags as $tag)
                    <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label>Featured Image</label>
            <input type="file" wire:model="image">

            <div wire:loading wire:target="image">Uploading...</div>

            @if ($image)
                <img src="{{ $image->temporaryUrl() }}" width="200">
            @endif
        </div>

        <button type="submit" wire:loading.attr="disabled">
            <span wire:loading.remove>Save Post</span>
            <span wire:loading>Saving...</span>
        </button>
    </form>
</div>

2 files · php, blade Explain with highlit

Livewire enables reactive, dynamic interfaces without writing JavaScript—components re-render automatically when properties change. I create Livewire components as PHP classes with public properties and methods. Properties bind to Blade views with wire:model, updating in real-time. Actions trigger via wire:click, calling component methods. Livewire handles AJAX requests, diffing, and DOM updates automatically. Validation works identically to forms with $rules properties. Lifecycle hooks like mount() and updated() handle initialization and property changes. For performance, I use wire:model.lazy to reduce requests and wire:loading to show loading states. Livewire bridges the SPA experience with server-side rendering simplicity.