Laravel Livewire 3

Livewire

Livewire is a full-stack framework for Laravel that allows you to build modern, reactive user interfaces using Blade (Laravel’s templating engine) without writing much JavaScript.

What It Does:

Livewire lets you create interactive components (like modals, dropdowns, forms, or real-time tables) using just PHP. It handles frontend reactivity and DOM updates by communicating with the backend via AJAX requests.

Key Concepts:

• Components: Defined as PHP classes + Blade views.
• Reactivity: Changes to component data automatically update the DOM.
• AJAX under the hood: Livewire sends AJAX requests to Laravel when needed.
• No build tools required: Works out of the box with Blade, unlike Vue or React.

When to Use Livewire:

• Building dashboards, admin panels, or form-heavy apps.
• You want reactivity but prefer PHP over JavaScript.
• You’re already using Laravel and want tight integration.

Prerequisites

Before we start, make sure you have the following installed:

• Laravel version 10 or later
• PHP version 8.1 or later

Install Livewire

composer require livewire/livewire

Make sure Alpine isn’t already installed

If the application you are using already has AlpineJS installed, you will need to remove it for Livewire to work properly; otherwise, Alpine will be loaded twice and Livewire won’t function. For example, if you installed the Laravel Breeze “Blade with Alpine” starter kit, you will need to remove Alpine from resources/js/app.js.

Create a Livewire component

Livewire provides a convenient Artisan command to generate new components quickly. Run the following command to make a new Counter component:

php artisan make:livewire counter

This command will generate two new files in your project:

1. app/Livewire/Counter.php
2. resources/views/livewire/counter.blade.php

Writing the class

Open app/Livewire/Counter.php and replace its contents with the following:

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

Writing the view

Open the resources/views/livewire/counter.blade.php file and replace its content with the following:

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

What is Laravel Livewire?

Laravel Livewire is a tool that makes it super easy to build modern web apps using just PHP — no need to become a JavaScript expert!

Livewire helps you build websites faster. You can create complex features like forms, filters, and live updates without writing tons of code or switching between different languages.

<input wire:model.live="search">
 
 
@foreach ($this->users as $user)
    <div>{{ $user->name }}</div>
@endforeach

class SearchUsers extends Component
{
    public $search = '';
 
    public function render()
    {
        return view('search-users', [
            'users' => User::search($this->search),
        ]);
    }
}

For more details and official documentation, visit Laravel Livewire