Laravel 9 CRUD with Vue JS 3 – Part One

In this tutorial, we will be building a simple CRUD (Create, Read, Update, Delete) application using Laravel 9 and Vue JS 3. This application will allow us to perform basic operations on a database, such as adding, viewing, updating, and deleting records. We will be using Laravel as our backend framework and Vue JS for the frontend.

Prerequisites

Before we begin, make sure you have the following installed on your machine:

• PHP
• Composer
• Node.js
• NPM
• Laravel 9
• Vue JS 3

Setting Up the Project

First, let’s create a new Laravel project. Open your terminal and run the following command:

“`html
$ composer create-project --prefer-dist laravel/laravel my-crud-app
“`

Next, navigate to your project directory and install Vue JS using NPM:

“`html
$ cd my-crud-app
$ npm install
“`

Now that we have our project set up, let’s move on to creating the CRUD functionality.

Creating the Database

For the purpose of this tutorial, we will be using a simple database with a single table. Create a new database and add a table called ‘items’ with the following columns:

• id (integer, primary key, auto-increment)
• name (string)
• description (text)

Once the database is set up, we can move on to creating the backend API endpoints.

Creating the Backend API

Let’s start by creating a new controller for our items. In your terminal, run the following command:

“`html
$ php artisan make:controller ItemController
“`

Next, open the ‘ItemController.php’ file and add the following methods for our CRUD operations:

“`html
public function index() { }
public function store(Request $request) { }
public function show($id) { }
public function update(Request $request, $id) { }
public function destroy($id) { }
“`

These methods will handle the retrieval, creation, updating, and deletion of items in our database.

Setting Up Vue JS

Now that our backend API is ready, let’s move on to setting up Vue JS for the frontend. Create a new Vue component to display and manage our items. In your terminal, run the following command:

“`html
$ npm run dev
“`

This will compile our Vue components and prepare them for use in the browser.

Conclusion

At this point, we have set up our Laravel backend with CRUD API endpoints and our Vue JS frontend to manage our items. In part two of this tutorial, we will be creating the frontend components and integrating them with our backend API.