Build a To-Do App in Laravel: Step-by-Step Livewire Example

Content

Create a new Laravel Project using the below command:

• composer create-project –prefer-dist laravel/laravel livewire-todo
• cd livewire-todo

After successfully creating a new project, install Livewire:

• composer require livewire/livewire

Create Migration and Model

• php artisan make:model Todo -m

database\migrations\2024_07_05_073256_create_todos_table.php

Schema::create('todos', function (Blueprint $table) {
  $table->id();
  $table->string('name');
  $table->boolean('completed')->default(false);
  $table->timestamps();
});

App\Models\Todo

class Todo extends Model{
use HasFactory;
protected $guarded = [];
}

Create the Livewire Component

• php artisan make:livewire TodoList

This command will create two files:

1.TodoList.php(app/Http/Livewire).
2.todo-list.blade.php(resources/views/livewire).

1.TodoList.php

<?php
namespace App\Livewire;
use Livewire\Attributes\Rule;
use Livewire\Component;
use Livewire\WithPagination;
class TodoList extends Component
{
    use WithPagination;
    #[Rule('required|min:3|max:50')]
    public $name;
    #[Rule('required|min:3|max:50')]
    public $EditingNewName;
    public $EditingTodoID;
    public $search;
    public function create(){
        $this->validateOnly('name');
        Todo::create(['name' => $this->name]);
        $this->reset('name');
        $this->resetPage();
        session()->flash('success', 'Todo Created Successfully.');
    }
    public function delete($id){
        try {
            Todo::findOrFail($id)->delete();
        } catch (\Throwable $th) {
            session()->flash('error', 'Failed to delete todo!');
            Log::error($th->getMessage());
            return;
        }
    }

    public function edit($id){
        $this->EditingTodoID = $id;
        $this->EditingNewName = Todo::find($id)->name;
    }

    function toggle($id){
        $todo = Todo::find($id);
        $todo->completed = !$todo->completed;
        $todo->save();
    }

    public function update(){
        $this->validateOnly('EditingNewName');
        Todo::find($this->EditingTodoID)->update([
            'name' => $this->EditingNewName,
            'created_at' => now(),
        ]);
        $this->cancel();
    }

    public function cancel(){
        $this->reset('EditingTodoID', 'EditingNewName');
    }
    public function render(){
        return view('livewire.todo-list', [
            'todos' => Todo::latest()->where('name', 'like', "%{$this->search}%")->paginate(3),
        ]);
    }
}

2.todo-list.blade.php

    @if (session('error'))
        

            

                

                

                    
Error
                    
{{ session('error') }}
                
            
        
    @endif
    @include('includes.create-todo-list')
    @include('includes.search-box')
    

        @foreach ($todos as $todo)
            @include('includes.todo-card', ['todo' => $todo])
        @endforeach
        

            
            {{ $todos->links() }}
        
    
    

For the main Livewire component, we’re going to create a subview for the TODO list items so that our file is kept
clean and organized. This is the responsible subview that will render an individual TODO item.

First, Create a New Blade File (todo-item.blade.php) inside the resources/views/includes directory:

resources/views/includes/create-todo-list.blade.php

    

        

            

                
Create New Todo
            
            

                

                    

                        *
                            Todo 
                        
                        @error('name')
                            {{ $message }}
                        @enderror
                    
                    Create
                        +
                    @if (session('success'))
                        {{ session('success') }}
                    @endif
                
            
        
    

resources/views/includes/search-box.blade.php

resources/views/includes/todo-card.blade.php

    

        

            @if ($EditingTodoID == $todo->id)
            
            

                @error('EditingNewName')
                {{ $message }}
                @enderror
            
            @else
            
{{ $todo->name }}
            @endif
        
        

            
            
                
            
            
            
                
            
        
    
     {{ $todo->created_at }} 
    

        

            @if ($EditingTodoID == $todo->id)
            

                
                    Update
                
                
                    Cancel
                
            
            @else
            

                completed ? 'checked' : '' }} />
                
                    @if ($todo->completed)
                    
                    Completed
                    @else
                    
                    Mark as Completed
                    @endif
                
            
            @endif
        
    
          

Finally, include the Livewire scripts in your resources/views/welcome.blade.php:

Running the Application

Now, run the code to see that TODO list on your application screen. Type the following command and hit enter.

php artisan serve

Now go to your browser and visit http://localhost:8000 doing some magician 🙂

GitHub Repository

Here is a complete code for this project on my GitHub repository: GitHub Repository Link

Conclusion

And that’s it! In literally 5 minutes you built a dynamic TODO list app in Laravel + Livewire v3. Join us to build interactive applications using very little code, and see how simple and powerful Livewire is while building something practical There you have it, feel free to keep going on this project by continuing with such as storing tasks in a database or user authentication and more complex interactions.

Stay tuned for more tutorials and happy coding!🙂

Dolphin Web Solution has dedicated and skilled Laravel developers. Are you looking for a Laravel expert? If yes, then without wasting a second, contact us and hire a Laravel developer. We ensure to provide the best and most proficient Laravel developers who can meet your requirements.