Laravel Livewire

Bringing PHP to the frontend.

Demo

A simple demo using Livewire.

This demo will use Livewire to create a simple todo list, while it will not save anything to the database in this example, the concept should give you an idea of how useful Livewire can be.

Add items to the todo list!

No items todo 🎉

Show Your Working

A quick walkthrough of how this works.

This walkthrough won't cover all aspects, but it should give you a good idea of how it all works.

My assumptions, are at the very least, are that you have Laravel setup with Livewire installed and configured.

The Livewire Components

For Livewire components, you need a controller and a view, to generate these two files run the following artisan command. 

php artisan make:livewire Demos/TodoList

This will create the files /app/Livewire/Demos/TodoList.php and /resources/views/livewire/demos/todo-list.blade.php , these files are very simple, the first handles the server code or logic and the other is the view displayed to the user.

The Livewire Controller 

 1<?php
 2 
 3namespace App\Livewire\Demos;
 4 
 5use Illuminate\Support\Collection;
 6use Livewire\Component;
 7 
 8class TodoList extends Component
 9{
10    public Collection $todos;
11    public null|string $newItem = null;
12 
13    public function mount(): void
14    {
15        $this->todos = collect();
16    }
17 
18    public function render()
19    {
20        return view('livewire.demos.todo-list');
21    }
22 
23    public function addItem(): void
24    {
25        if ($this->newItem) {
26            $this->todos->push([
27                'name' => $this->newItem,
28                'done' => false,
29            ]);
30            $this->newItem = null;
31        }
32    }
33 
34    public function toggleItem($item): void
35    {
36        $temp = $this->todos->get($item);
37        $temp['done'] = ! $temp['done'];
38        $this->todos->put($item, $temp);
39    }
40 
41    public function removeItem($item): void
42    {
43        $this->todos = $this->todos->forget($item)->values();
44    }
45}

The Livewire View 

 1<div class="w-full relative">
 2    <div class="flex items-center mb-4">
 3        <input type="text"
 4               wire:model="newItem"
 5               wire:keydown.enter="addItem"
 6               placeholder="Buy some eggs"
 7               class="w-full outline-none border-2 border-slate-300 focus:border-slate-400 rounded-lg pl-2 pr-8 py-2 transition">
 8        <span wire:click="addItem"
 9              class="cursor-pointer absolute right-0 mr-3"
10              title="Add Item">
11            <i class="fa-solid fa-plus"></i>
12        </span>
13    </div>
14 
15    <div class="w-full">
16        @if ($todos->isNotEmpty())
17        @foreach($todos as $key => $item)
18        <div class="flex text-lg py-2 {{ $key > 0 ? 'border-t border-black' : '' }}">
19            <p class="{{ $item['done'] ? 'line-through' : '' }} grow">{{ $item['name'] }}</p>
20            <span wire:click="toggleItem({{ $key }})"
21                  class="cursor-pointer ml-4"
22                  title="Mark item done / not done">
23                        <i class="fa-solid fa-circle-check"></i>
24                    </span>
25            <span wire:click="removeItem({{ $key }})"
26                  class="cursor-pointer ml-2"
27                  title="Delete item">
28                        <i class="fa-solid fa-trash"></i>
29                    </span>
30        </div>
31        @endforeach
32        @else
33        <p class="py-2">No items todo 🎉</p>
34        @endif
35    </div>
36</div>

The Main View

We now need to start creating our main frontend for the user to interact with, this will define the general layout and also include the Livewire component.

You can create a view with the following artisan command. 

php artisan make:view demos/todo

This will create the file /resources/views/demos/todo.blade.php , you can now build this up to fit your design, below is a condensed version of my file, notice the Livewire element defined. 

 1<x-layouts.html
 2    title="Laravel Livewire - Demos"
 3    pageTitle="Laravel Livewire"
 4    pageTagLine="Bringing PHP to the frontend."
 5>
 6    <x-content-container class="w-full mb-8">
 7        <div class="mb-8 text-left">
 8            <h2 class="text-2xl mb-2">Demo</h2>
 9            <p class="mb-2 text-slate-500">A simple demo using Livewire.</p>
10            <x-gradent-under-line />
11        </div>
12 
13        <div class="text-left"> 
14            <x-content-text class="mb-8 text-2xl text-center">
15                Add items to the todo list!
16            </x-content-text>
17 
18            <!-- Include the Livewire component -->
19            <livewire:demos.todo-list />
20        </div> 
21    </x-content-container>
22</x-layouts.html>

The Route

Finally, to enable people to access this page, we need to define a route in the /routes/web.php file. 

Route::get('/demos/todo', function () {
    return view('demos/todo');
})->name('demos.todo');