• Hello, Visitor
  • Monday, February 17, 2025
Search Result
Home » Laravel » Livewire » Building a Simple To-Do List with Laravel Livewire 3: Add & Delete Tasks in Real-Time

Building a Simple To-Do List with Laravel Livewire 3: Add & Delete Tasks in Real-Time

Introduction

In this tutorial, we’ll walk through building a simple, real-time To-Do List application using Laravel Livewire 3. This application will allow users to add and delete tasks dynamically, without the need to refresh the page, leveraging the power of Livewire’s real-time interactivity. We’ll also use Bootstrap to style our interface, making it easy and appealing to use.

Step 1: Set Up Laravel and Livewire

Begin by creating a new Laravel project and installing Livewire 3. Make sure you have Composer installed before proceeding.

composer create-project laravel/laravel todo-list
cd todo-list
composer require livewire/livewire:^3.0

Step 2: Create the To-Do List Livewire Component

Generate a new Livewire component named ToDoList. This will create two files: one for the component’s logic and one for the Blade view.

php artisan make:livewire ToDoList

Step 3: Define the Component Logic

Open app/Http/Livewire/ToDoList.php and add properties and methods for adding and deleting tasks. The $tasks array will hold the list of tasks, and $newTask will store the input for new tasks.

namespace App\Http\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;

class ToDoList extends Component
{
    public $tasks = [];
    public $newTask = '';

    #[On('addTask')]
    public function addTask()
    {
        if (!empty($this->newTask)) {
            $this->tasks[] = $this->newTask;
            $this->newTask = '';
        }
    }

    #[On('deleteTask')]
    public function deleteTask($index)
    {
        unset($this->tasks[$index]);
        $this->tasks = array_values($this->tasks); // Re-index the array
    }

    public function render()
    {
        return view('livewire.to-do-list');
    }
}

Step 4: Design the Blade View with Bootstrap

In resources/views/livewire/to-do-list.blade.php, create a simple interface for adding tasks and displaying the list. We’ll use Bootstrap for styling, including a text input for new tasks and buttons for adding and deleting tasks.

<div class="container mt-4">
    <h2 class="mb-4">To-Do List</h2>
    
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="New Task" wire:model.live="newTask">
        <button class="btn btn-primary" wire:click="$dispatch('addTask')">Add Task</button>
    </div>

    <ul class="list-group">
        @foreach($tasks as $index => $task)
            <li class="list-group-item d-flex justify-content-between align-items-center">
                {{ $task }}
                <button class="btn btn-danger btn-sm" wire:click="$dispatch('deleteTask', {{ $index }})">Delete</button>
            </li>
        @endforeach
    </ul>
</div>

Step 5: Include Livewire Scripts and Bootstrap in Your Layout

In your main layout file, resources/views/layouts/app.blade.php, include Livewire’s scripts and styles, along with Bootstrap for styling.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    @livewireStyles
</head>
<body>
    <div class="container">
        @yield('content')
    </div>

    @livewireScripts
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 6: Integrate the To-Do List Component in a View

Create or edit a view file, such as resources/views/welcome.blade.php, to render the To-Do List component.

@extends('layouts.app')

@section('content')
    @livewire('to-do-list')
@endsection

Step 7: Run the Application

Start the Laravel development server to see your To-Do List application in action:

php artisan serve

Visit http://localhost:8000 to access the To-Do List app. Now you can add tasks to the list by typing into the input field and clicking the “Add Task” button. Each task is displayed in real-time without page reloads, and you can delete tasks with a click of the “Delete” button next to each one.

Conclusion

Congratulations! You have successfully created a real-time To-Do List application using Laravel Livewire 3. This simple app demonstrates the power of Livewire for building dynamic, interactive interfaces in Laravel. Experiment with additional features, such as task editing or persistent storage with a database, to further enhance your app.


Leave a Reply

You must Login to add a comment