Livewire 3: Build Dynamic UIs Without JavaScript in Laravel

Building dynamic, interactive web applications often requires a frontend framework like Vue or React, which means managing state on the client and writing JavaScript. But what if you could achieve the same interactivity using only PHP and Blade templates? That's exactly what Livewire 3 offers. Livewire is a full-stack framework for Laravel that makes building dynamic UIs simple and enjoyable, without leaving the comfort of PHP. In this tutorial, you'll learn how to create reactive components, handle user interactions, and manage state—all with server-side rendering. We'll cover real-world examples like a live search, a counter, and a form with validation. By the end, you'll be able to build modern, dynamic interfaces while leveraging your existing PHP skills. Whether you're building a dashboard, a chat widget, or a complex form, Livewire 3 empowers you to do it faster and with less code.

What is Livewire 3?

Livewire 3 is a full-stack framework for Laravel that allows you to build dynamic, reactive user interfaces using PHP and Blade templates. It eliminates the need for writing JavaScript by handling AJAX requests and DOM diffing automatically. Each Livewire component is a PHP class that extends Livewire\Component and a corresponding Blade view. Public properties in the component are automatically synced with the frontend, and methods can be called from the view using directives like wire:click. Livewire 3 introduces a new JavaScript-less approach, improved performance, and features like #[Rule] attributes for validation, #[Computed] for computed properties, and #[Reactive] for reactive data. It's perfect for developers who want to stay in PHP while building modern interfaces.

<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

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

Setting Up Livewire 3 in Laravel

To get started with Livewire 3, you need a Laravel application (version 10 or 11 recommended). Install Livewire via Composer: composer require livewire/livewire. Then, publish the configuration file: php artisan livewire:publish --config. Livewire 3 automatically registers its service provider. You can create your first component using the Artisan command: php artisan make:livewire Counter. This generates a PHP class in app/Livewire/Counter.php and a Blade view in resources/views/livewire/counter.blade.php. To render the component in any Blade view, use <livewire:counter /> or @livewire('counter'). Make sure your layout includes Livewire's JavaScript and styles: @livewireStyles in the head and @livewireScripts before the closing body tag. For production, you can compile and cache Livewire's assets using php artisan livewire:publish --assets.

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

Building a Live Search Component

One of the most common dynamic UI patterns is a live search that filters results as the user types. With Livewire, this is straightforward. Create a component: php artisan make:livewire SearchPosts. In the component class, add a public property $search and a method to query the database. Use the #[Computed] attribute to define a computed property for the results. In the Blade view, bind the input to $search using wire:model.live (which triggers updates on each keystroke). The component will automatically re-render when $search changes. Here's an example that searches posts by title.

<?php

namespace App\Livewire;

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

class SearchPosts extends Component
{
    public $search = '';

    #[Computed]
    public function posts()
    {
        return Post::where('title', 'like', '%' . $this->search . '%')->get();
    }

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

Form Validation with Livewire 3

Livewire 3 makes form validation a breeze. You can define validation rules using the #[Rule] attribute on properties or in a $rules array. When a user submits the form, Livewire automatically validates the data and displays errors. Use wire:submit.prevent to handle form submission without a page reload. In the Blade view, use @error directives to show validation messages. Livewire also supports real-time validation by adding wire:model.blur or wire:model.live with validation on update. Here's an example of a simple contact form.

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\Attributes\Rule;

class ContactForm extends Component
{
    #[Rule('required|email')]
    public $email = '';

    #[Rule('required|min:10')]
    public $message = '';

    public function submit()
    {
        $this->validate();
        // Process the form...
        session()->flash('success', 'Message sent!');
        $this->reset();
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

File Uploads in Livewire

Livewire 3 simplifies file uploads with temporary files and progress tracking. Use wire:model on a file input, and Livewire will handle the upload asynchronously. You can validate file types and size using #[Rule]. The uploaded file is stored temporarily and can be moved to permanent storage. Use $this->validate() to ensure the file meets criteria. Livewire also provides a $this->upload() method for more control. Here's an example of a profile picture upload.

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\Attributes\Rule;

class UploadPhoto extends Component
{
    use WithFileUploads;

    #[Rule('image|max:1024')] // 1MB max
    public $photo;

    public function save()
    {
        $this->validate();
        $path = $this->photo->store('photos', 'public');
        // Save path to user model...
        session()->flash('message', 'Photo uploaded!');
    }

    public function render()
    {
        return view('livewire.upload-photo');
    }
}

Polling and Real-Time Updates

Livewire can poll the server at intervals to update data automatically. Use the wire:poll directive on a container element. For example, to refresh a list of notifications every 10 seconds: <div wire:poll.10s>...</div>. You can also trigger polling on a specific action using $this->dispatch('poll'). In Livewire 3, you can use the #[Reactive] attribute to make a property automatically update when its value changes on the server. This is useful for real-time dashboards. Here's a simple clock component that updates every second.

<?php

namespace App\Livewire;

use Livewire\Component;

class Clock extends Component
{
    public $time;

    public function mount()
    {
        $this->time = now()->toTimeString();
    }

    public function refreshTime()
    {
        $this->time = now()->toTimeString();
    }

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

Security Best Practices

Livewire handles CSRF protection automatically, but you must still follow security best practices. Always validate and sanitize user input. Use $this->validate() or #[Rule] attributes. Be cautious with wire:model on sensitive data; avoid binding to passwords directly. Use wire:model.lazy for password fields to reduce exposure. For authorization, use Laravel's policies and gates within Livewire actions. Never trust $this->all(); always validate. Also, ensure your Livewire components are not exposing sensitive data through public properties. Use #[Computed] for data that should be computed on demand.

<?php

namespace App\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Gate;

class SecureComponent extends Component
{
    public $postId;

    public function deletePost()
    {
        $post = Post::findOrFail($this->postId);
        Gate::authorize('delete', $post);
        $post->delete();
    }

    public function render()
    {
        return view('livewire.secure-component');
    }
}