How To Manage a List of Entities with Laravel and Vue3

You'll make more money and earn more respect when you deliver quality code faster. Laranerds.dev helps you do just that. Sign up to be notified when new resources are published.

In almost every web application you work on, you will be asked to implement a feature that displays a list of entities, e.g. Products or Tasks, and allows Users to either add new entities, or update and delete existing entities.

Rather than write this code from scratch every time, you can copy and paste from your own battled-tested swipe file or test application.

The faster you delivery bug-free code, the better you will look to your employer or client, and the more time you'll have to work on interesting problems.

The Feature Request

The acceptance criteria may look something like this:

• User can view a list of Tasks
• User can create a new Task
• New Tasks are added to the bottom of the list right away
• User can Update an existing Task from the list
• Updated Tasks are updated in the list right away
• User can Delete a Task from the list
• Users are asked to confirm the Delete action
• Deleted Tasks are removed from the list right away

We will be creating a list of Knights. I like Knights.

If you want to follow along with this example you can either clone this Laranerds Example Application, or you can implement these changes in your own practice Laravel application.

Ensure you checkout this tag - Manage Entities v1

After cloning the repo run git checkout ManageEntities-1 in your terminal.

Files Overview

All the code required for this feature is found in the following files:

1. app/Http/Controllers/KnightController.php
2. resources/js/Pages/Knights.vue
3. routes/web.php

Any other files involved in the feature - models, migration, etc. - would be common to any application.

Explanation

For a detailed explanation, check out the video here::

But sure to sign up at Laranerds if you want to be notified when new tutorials and code snippets are published.