- Hello, Visitor
- Monday, February 17, 2025
Search Result
Building a Simple To-Do List with Laravel Livewire 3: Add & Delete Tasks in Real-Time
Posted by NzCoding - 08 October 2024

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.
Related posts
Laravel Livewire 3: Building Dynamic Web Apps Made Easy
Live Form Validation with Laravel Livewire
Auto Generate Slug with Laravel Livewire
Laravel Livewire Crud - Part 04 (Delete Data)
Laravel Livewire Crud - Part 03 (Edit Data)
Laravel Livewire Crud - Part 02 (Get Data from Database)
Laravel Livewire Crud - Part 01 (Add Data to Database)
Laravel Livewire Installation & Layout Setup
Laravel Livewire Image Upload with Preview
Laravel Livewire CRUD with Bootstrap Modal
Popular Posts
Featured Post
Categories
- Html Css 7
- More 3
- Card Design 2
- Spinner 2
- GitHub 2
- Laravel 16
- Livewire 12
- Javascript 1
- Form Design 1
- SEO 1
- Php 0
Leave a Reply