lntroduction to Laravel Livewire

Introduction
This article introduces Livewire and how it can be implemented into a Laravel application.

A modern full-stack web app can be a bit complex to build especially with tools like Vue and React and this is the problem Livewire aims to solve.

Livewire is a full-stack framework for Laravel that enables a developer to build a dynamic interface that is less complex within the Laravel environment.

Prerequisites
Basic knowledge of Laravel is needed

Takeaways
After going through this article, you will understand:

What Livewire is?
What problem does Livewire aim to solve, and
How to get started with Livewire

with that being said, the following steps will enable us to get started with Livewire and how we can implement it into our Laravel application.

Steps
a) Install a new Laravel project using
composer create-project laravel/laravel laravel-livewire
b) cd into laravel-livewire
c) Run composer require livewire/livewire
d) Include @livewireStyles and @livewireScripts in the head and body tag of your views/welcome.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel | Livewire</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
        @livewireStyles
    </head>
    <body class="antialiased">


        @livewireScripts
    </body>
</html>

once that is done, we have all we need to start using Livewire in our Laravel application.

e) Next, run php artisan serve
f) Let make our first Livewire component for a simple counter to increase and decrease a value using the php artisan make livewire counter command.

if that is successful, you should see a screen like the one below in your terminal

Looking into our project structure, the above command created two new files in app/Http/Livewire/Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

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

and resources\views/livewire/counter.blade.php

<div>
    ....
</div>

g) Next, we want to render a simple text to our browser to ensure our component is working, modify your counter Livewire blade file

<div>
    <h1>I am learning Livewire</h1>
</div>

h) Before that, we need to include <livewire: counter /> component in our welcome blade file

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel | Livewire</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
        @livewireStyles
    </head>
    <body class="antialiased">

        <livewire:counter /> 

        @livewireScripts
    </body>
</html>

we can now preview it on our browser

Whola!, we have our component rendered to the browser successfully.
i) We can now implement our simple counter

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

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

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

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

Here, we declared a public property $count initialized to zero, a method to increase and decrease the number. Public property in Livewire is automatically made available to the view.

<div style="text-align: center">
  <h1>Counter using Laravel Livewire</h1>
  <button type="submit" wire:click="increase">+</button>
  <button type="submit" wire:click="decrease">-</button>
    <h2>{{$count}}</h2>
</div>

we used the livewire template directive in our buttons to increase and decrease the number.

we have successfully implemented a simple counter to increase and decrease numbers using Livewire.

A lot can be still be gotten from Livewire to enable you to build that full-stack modern web application.

To read and get more on Livewire, visit livewire documentation

The code snippet for this tutorial can be found in my GitHub repo

Feel free to say hi via LinkedIn

Blog

lntroduction to Laravel Livewire

Judith ☁ Oiku

Join Our Newsletter. No Spam, Only the good stuff.

Related