Building a Simple To-Do List with Laravel Livewire 3: Add & Delete Tasks in Real-Time
LARAVEL
LIVEWIRE
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')
@endsectionStep 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.
Comments (0)
Leave a Comment
You need to login to post a comment
Login to Comment