Laravel Livewire Counter Tutorial

Introduction

Creating interactive web components is crucial for a modern web experience. Laravel Livewire simplifies this by allowing developers to create dynamic components easily. In this tutorial, we'll dive into creating a counter component with Laravel Livewire.

Getting Started

To follow along, ensure you have a Laravel environment set up and Livewire installed. If you haven't installed Livewire yet, run:

composer require livewire/livewire

Creating the Counter Component

Start by generating a new Livewire component:

php artisan make:livewire Counter

This command creates two files: the component class and a Blade view.

Building the Component

In your Counter class located at app/Http/Livewire/Counter.php, add:

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

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

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

The View

Edit the Blade view resources/views/livewire/counter.blade.php:

<div style="text-align: center;">
    <button wire:click="decrement">-</button>
    <span>{{ $count }}</span>
    <button wire:click="increment">+</button>
</div>

Usage

Embed the component in any Blade file:

<div>
    @livewire('counter')
</div>

Conclusion

Congratulations! You've created a dynamic counter with Laravel Livewire. This example serves as a foundation for building more complex components.

For further exploration, check out Laravel Livewire Documentation.

Happy coding! 🚀