Return Home

Laravel Livewire Counter Tutorial


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()

    public function decrement()

    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>


Embed the component in any Blade file:



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! 🚀

Written © 2024 Written Developer Tutorials and Posts.