Creating a Simple Counter Component in Laravel Livewire

I’ll guide you through creating a counter component in Livewire step by step. This is a great first project to understand Livewire’s basics.

Step 1: Install Livewire (if not already installed)

Run this command in your terminal:

composer require livewire/livewire

Step 2: Create a new Livewire component

Run this command to generate your counter component:

php artisan make:livewire counter

This will create two files:

app/Http/Livewire/Counter.php (the PHP component class)
resources/views/livewire/counter.blade.php (the view file)

Step 3: Set up the component class

Open app/Http/Livewire/Counter.php and modify it:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0; // This is our reactive state

    public function increment()
    {
        $this->count++; // This will automatically update the view
    }

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

Step 4: Create the view

Open resources/views/livewire/counter.blade.php and add:

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

Step 5: Include the component in a view

You can now include your counter in any Blade view. For example, you could create a new route and view:

Add a route in routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

and the welcome.blade.view is:

<html>
    <head>
        <title>Livewire Counter</title>
        @livewireStyles
    </head>
    <body>
        <h1>Welcome to Livewire Counter</h1>
        @livewire('counter')
        @livewireScripts
    </body>
</html>

Step 6: Test your component

Start your Laravel development server:

Creating a Simple Counter Component in Laravel Livewire

Step 1: Install Livewire (if not already installed)

Step 2: Create a new Livewire component

Step 3: Set up the component class

Step 4: Create the view

Step 5: Include the component in a view

Step 6: Test your component

By adhikariishwor013@gmail.com

Leave a Reply Cancel reply

You Missed

Creating a Quiz App in Django Python

How to implement category in Laravel Project

How to highlight the current menus in laravel

Sidebar made in tailwind css first sidebar

Step 1: Install Livewire (if not already installed)

Step 2: Create a new Livewire component

Step 3: Set up the component class

Step 4: Create the view

Step 5: Include the component in a view

Step 6: Test your component

By adhikariishwor013@gmail.com

Related Post

Leave a Reply Cancel reply

You Missed