Build A TodoList with Laravel and Vue

Create a Laravel project using the preset, configure php 8, postgres, and redis with docker compose, and review the yaml commands and engine x configuration for deployment.

Build a Laravel docker image by configuring Postgres database connections and ports, run the initial install, and learn container management while verifying port 80 access.

Learn to create a Laravel model and migration with artisan, define title and completed fields, run migrations, verify tables, and start building an api with controllers.

Create an api/todo controller with Laravel’s Artisan make:controller, including index, store, show, update, and destroy methods. Then register the resource routes and verify them with artisan route:list.

Implement the Laravel API store method to create todo items from requests, save them to the database, and return a json response with status 200, testing by creating todos.

Fill in Laravel controller methods to fetch all todos and a single todo using Eloquent, employing findOrFail with the ID, and return json responses with a 200 status.

Update a todo via the Laravel API by using the request id and the request object, then return the updated todo with a 200 status.

Learn how to delete a to-do item using a Laravel API, call the delete function, verify removal in the database with a 200 response, and prepare for frontend integration.

Install Vue CLI globally, verify the version, scaffold a new project with Vue CLI, select Babel and TypeScript, choose Vue 3, and run the dev server to view at localhost.

Install axios and the Element Plus UI library with npm install, import axios in the main file, and configure the UI components to start building the todo list.

Create initial Vue components, including a to-do list fed by a new form component, and explore class components with the option decorator and the composition API.

Create a todo form component with a title field and a completed boolean, bind inputs, and emit an event to pass the new todo data to the parent.

Use Vue events to pass data between child and parent components, move to-do logic to a parent method, save the to-do, and log a notification to the console.

Finish the tiny todo form by adding an if-else check for a title longer than three characters, emit a warning when too short, and clear the form after submission.

Display todos by loading data via axios.get from a local rest API, render a table with title and completed columns, and wire up the form for updates and deletions.

Build a todo list with Laravel and Vue by implementing CRUD functions: create, update, and delete using axios, and defining a todo interface for id, title, and completed.

Finish the Vue table UI to manage the to-do list by adding an operations column, toggling the completed status, and a delete confirmation workflow.

This bonus video offers a 30% lifetime discount for code brains students, with monthly updates and access to a special forum; use the code new 30 for unlimited access.