Laravel 11 Livewire 3 wire:click - Handle Click Event

Websolutionstuff | Mar-18-2025 | Categories : Laravel

In this tutorial, I’ll show you how to handle a click event in Laravel 11 Livewire 3 with a simple and clear example. If you're new to Livewire, don’t worry! I’ll explain everything step-by-step.

Livewire makes it super easy to handle JavaScript events like click, input, and submit directly in your Laravel Blade templates without writing any JavaScript code.

By the end of this tutorial, you'll be able to handle a click event using Livewire 3 in Laravel 11.

Laravel 11 Livewire 3 Click Event: Handle Click Event with Example

Step 1: Install Laravel 11

If you haven’t installed Laravel 11 yet, you can do so by running the following command:

composer create-project laravel/laravel laravel11-app

Step 2: Install Livewire 3

Now, let’s install Livewire 3 in your project:

composer require livewire/livewire

After that, publish the Livewire configuration file:

php artisan livewire:publish

Step 3: Create Livewire Component

Now let’s create a Livewire component using the artisan command:

php artisan make:livewire Counter

This command will generate two files:

app/Livewire/Counter.php (for logic)
resources/views/livewire/counter.blade.php (for the UI)

Step 4: Update Livewire Component Logic

Now open app/Livewire/Counter.php and update the logic like this:

app/Livewire/Counter.php

<?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');
    }
}

Step 5: Update Livewire Blade View

Now open resources/views/livewire/counter.blade.php and update it like this:

resources/views/livewire/counter.blade.php

<div>
    <h1>Counter: {{ $count }}</h1>
    <button wire:click="increment">Click Me</button>
</div>

In the above code:

We are displaying the counter value using {{ $count }}.
We have a button with a wire:click event that calls the increment function from the component.

Step 6: Add Component to Blade View

Now, include your component in the welcome.blade.php or any Blade file like this:

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livewire Click Event</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body>

    <livewire:counter />

    @livewireScripts
</body>
</html>

Step 7: Run the Project

Now, run your project using: