Introduction

Sometimes building modern web apps is hard. Tools like VueJS, React or Angular are extremely powerful, but the complexity they add to a full-stack developer's workflow is insane. Between all these great technologies, there is a framework called Livewire.

In this article, we will take a closer look at livewire and how it works. Without any complications 😃

What is Laravel Livewire?

In the simplest way. Laravel Livewire it's a package made for Laravel framework to make the relation between the Frontend & the Backend easy, Even if you don't know anything about JavaScript!

Why Laravel Livewire?

From the Official Website

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

Your First Component

If you decide to use Livewire you will use it as Components. It's like VueJS and other frontend frameworks. So, without farther say, let's jump-in into the code.

Installation steps

Create new Laravel project (if you don't do it yet!)
Install Livewire Package
Include Livewire Directives
Create a Component
Include The Component

This is all the steps you need to do to begin working with Livewire

1. Create New Laravel Project

You need to create new Laravel project if you want to begin fresh

You can use

laravel new livewire-example

If you don't know how to install a new Laravel website yet, Check The official Documentation

2. Install Livewire Package

Open your Laravel Project path and type in the console/terminal the following

composer require livewire/livewire

3. Include Livewire Directives

Include the JavaScript (on every page that will be using Livewire).

...
    @livewireStyles
</head>
<body>
    ...

    @livewireScripts
</body>
</html>

4. Create a Component

Let's create a basic counter component and understand how it works. First, you need to run the livewire artisan command:

php artisan make:livewire counter

Running this command will generate the following two files:

Component class called Counter.php located in app/Http/Livewire/Counter.php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

Component view called counter.blade.php located in resources/views/livewire/counter.blade.php

<div>
    ...
</div>

Let's add some text to the view, so we can see something tangible in the browser.

Note:

Livewire components MUST have a single root element.

<div>
   <h1> Hey! You are seeing the counter component!</h1>
</div>

5. Include The Component

The part of creation done! Let's move to the next step, which is including the component in the right page.

Think of Livewire components like Blade includes. You can insert <livewire:some-component /> anywhere in a Blade view, and it will render.

<head>
    ...
    @livewireStyles
</head>
<body>
    <!-- This is our counter component -->
    <livewire:counter />

    ...

    @livewireScripts
</body>
</html>

View It in The Browser

Load the page you included Livewire on in the browser. You should see, "Hey! You are seeing the counter component!".

Let's Bring The Counter Component To Life!

We need to add functionality to the counter component.

In Counter Class Component

class Counter extends Component
{
    public $count = 0;

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

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

In counter View Component

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

What we did here is the following:

The Component Class:

Making public property called count and set it to 0.
Adding method called increment to increment the count number.

The View component:

Adding button & an h1 to show the count.
Adding wire:click attribute to increment the count.

I don't understand what's going on exactly here!

That's totally understandable, think of this method like when you add some id's to your button in the frontend and trigger an event such as click to send an ajax request to the server, and again fetch the response and show it to the view. Hard I know!

Livewire did all this automagically!

Now reload the page in the browser, you should see the counter component rendered. If you click the "+" button, the page should automatically update without a page reload. Magic 🪄.️

Conclusion

Today we learned about Laravel Livewire, How it works and how to create a new component.

If you have any question, let me know in the comments sections, and I'm happy to answer them!

If you liked this kind of articles, you can see more here.

I hope you learned something new.

Happy Coding 👋

LivewireToolKit