livewwire

Introduction

If you're looking to build dynamic web applications with minimal JavaScript, Laravel Livewire is an excellent tool to consider. In this post, we'll walk through creating a simple To-Do app using Laravel 11, Livewire, PHP 8.3, and styling it with TailwindCSS. This example will cover the basics of Livewire and demonstrate how easy it is to build interactive UIs with Laravel.

Prerequisites

Before we get started, make sure you have the following installed herd https://herd.laravel.com its available for all platforms next got to site tab an click to new site or + the flow the steps

Creating the To-Do Component

Generate a Livewire component:

bash

php artisan make:livewire Todo

Livewire will create two files: Todo.php (Livewire component class) and todo.blade.php (Blade view). Open the component class located at app/Http/Livewire/Todo.php and update it:

php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Task;

class Todo extends Component
{
    public $tasks;
    public $task;

    public function mount()
    {
        $this->tasks = Task::all();
    }

    public function addTask()
    {
        Task::create(['name' => $this->task]);
        $this->task = '';
        $this->tasks = Task::all();
    }

    public function deleteTask($taskId)
    {
        Task::find($taskId)->delete();
        $this->tasks = Task::all();
    }

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

Creating the Blade View

Next, let's update the Blade view located at resources/views/livewire/todo.blade.php:

blade

<div class="max-w-lg mx-auto mt-10">
    <form wire:submit.prevent="addTask" class="flex mb-4">
        <input type="text" wire:model="task" placeholder="Add a new task" class="flex-1 p-2 border border-gray-300 rounded">
        <button type="submit" class="ml-2 p-2 bg-blue-500 text-white rounded">Add Task</button>
    </form>

    <ul class="list-disc pl-5">
        @foreach($tasks as $task)
            <li class="mb-2">
                {{ $task->name }}
                <button wire:click="deleteTask({{ $task->id }})" class="ml-2 text-red-500">Delete</button>
            </li>
        @endforeach
    </ul>
</div>

Creating the Task Model and Migration

Generate a new model and migration for our tasks:

bash

php artisan make:model Task -m

Open the migration file located at database/migrations/<timestamp>_create_tasks_table.php and define the tasks table structure:

php

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->timestamps();
    });
}

Run the migration to create the tasks table:

bash

php artisan migrate

Displaying the Component

Finally, let's display the Livewire component in your main welcome.blade.php file:

blade

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do App</title>
    @livewireStyles
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto">
        @livewire('todo')
    </div>
    @livewireScripts
</body>
</html>

Conclusion

And there you have it! 🎉 You've just built a simple To-Do app using Laravel 11, Livewire, PHP 8.3, and TailwindCSS. This example demonstrates how you can create dynamic, interactive applications with Laravel while enjoying the benefits of modern styling with TailwindCSS.

Feel free to expand on this example by adding features like editing tasks or marking them as complete. Happy coding! 🚀

Building a Simple To-Do App with Laravel Livewire

Introduction

Prerequisites

Creating the To-Do Component

Creating the Blade View

Creating the Task Model and Migration

Displaying the Component

Conclusion