Laravel Livewire - run php like javascript!

Laravel Livewire is a wonderful and magical Laravel package and front-end framework that will give you a different experience to make a web application with Laravel Framework. In modern SPA, basically we write JavaScript code to get interactivity of our application. Our application works without any page refresh. The Laravel Livewire package will give you almost the exact same things without writing JavaScript code, the php code will run from your frontend action without page refresh! Still a little bit confused! Let's see a simple example of what we do in traditional Vue Code with Laravel for making a simple counter.

<script>
    export default {
        data: {
            count: 0
        },
        methods: {
            increment() {
                this.count++
            },
            decrement() {
                this.count--
            },
        },
    }
</script>

<template>
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>

        <span>@{{count}}</span>
    </div>
</template>

Here, this is really simple example. From the view part, we can do increment or decrement of counter value by pressing buttons. Here the counter value is not persistent, because we did not fetch the counter value from the database or saving it to the database. If we do, this code will be more massive. The interesting part of the Laravel Livewire is, we can also work on persistent data with minimal code.

Install Laravel Livewire

composer require livewire/livewire

with Laravel Livewire

Make simple Counter class into app/Http/Livewire directory by using Livewire\Component. We can do it with composer command

php artisan make:livewire counter

// app/Http/Livewire/Counter.php

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

View code

// resources/views/livewire/counter.blade.php
<div>
    <button wire:click="increment">+</button>
    <h1>{{ $count }}</h1>
    <button wire:click="decrement">-</button>
</div>

There is no JavaScript code, right? Just PHP class and our blade view file. What we are used to about Laravel traditional development. In the view part, We just used Laravel Livewire directive wire:click and the value is the method name of our class. By pressing the plus button it will run the increment method of our Counter class and the $count value will be automatically updated without page refresh! Think of it, how cool this!

Get more details about function & feature check Laravel Livewire doc