make counter app using livewire in laravel

In this tutorial i will show you how to make simple counter App . in this tutorial we can not using any database or any big logic it is

simple and easy to implements let see . we are using Livewire package for this counter app

composer create-project laravel/laravel larainfo 

after install our project we can use any css framework for looking good i use Boostrap 4 now let install livewire package

composer require livewire/livewire  

after that we need to put @livewireStyles and @livewireScripts in your main file

 <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">


Create a component

php artisan make:livewire Counter



CLASS: app/Http/Livewire/Counter.php

VIEW: resources/views/livewire/counter.blade.php


namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
    public $counter;
    public $size;

    public function increment()
        // $this->counter = $this->counter + $this->size;
        $this->counter += $this->size;

    public function decrement()
        $this->counter -= $this->size;

    public function mount()
        $this->counter = 0;
        $this->size = 1; //default value 
    public function render()
        return view('livewire.counter');

now show home.blade.php

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Counter</div>

                <div class="card-body">

@livewire('counter') or <livewire-counter/> both are work

VIEW: resources/views/livewire/counter.blade.php

    <p>{{ $counter }}</p>
    <div class="form-group">
    <input type="number" class="form-control" wire:model="size">
    <button wire:click="increment" class="btn btn-info"> + </button> | <button wire:click="decrement" class="btn btn-info"> - </button>