How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA)

In this tutorial you will learn about the How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA) and its application with practical example.

In this How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA) Tutorial, I’ll show you how to create single page crud application using Vue Js in laravel. In this tutorial you will learn to create single page crud application using Vue Js in laravel 8. In this article we will be creating a basic single page crud application with vue js in laravel 8 application.

How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA)

In this step by step tutorial I’ll demonstrate with example to create single page crud application using Vue Js in laravel 8. Please follow the instruction given below:

  • Create a Laravel Project
  • Enable database connection
  • Create a model and run migration
  • Create and configure the controller
  • Add routes
  • Install Laravel Vue UI
  • Install NPM dependencies
  • Build Vue Js CRUD Components
  • Test Laravel Vue JS CRUD operations

Install Laravel App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

Database Connection

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

Set Up Model and Run Migration

Now, in this step we will create model and migration file. Please run the following command:

Add following code in database/migrations/create_products_table.php:

Define Product table values in app/Models/Product.php:

Now, run the migration to create database table using following artisan command:

Create Product Controller

Now, lets create a controller named ProductController using command given below –

Open and update the below code in app\Http\Controllers\ProductController.php:

Create CRUD Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Now we need to define routes in “routes/api.php” file. Lets open “routes/api.php” file and add the following routes in it.

routes/api.php

Install Laravel Vue UI

In this step we will install laravel Vue UI using following commands:

After that, use the command to install the vue router and vue axios packages. These packages are used to consume Laravel CRUD APIs.


Now run the following command to install npm packages:


The npm run watch command compiles the assets, not just that with run watch command you don’t fret about re-run the compiler over and over again.

Initiate Vue in Laravel

Place below code in resources/views/layout/app.blade.php file:

Crete Vue CRUD Components

Next you need to create a App.js file in resources/js folder, put the following code in resources/js/App.js file:

Lets create some vue js component files inside the resources/js/components folder:

AllProduct.vue
CreateProduct.vue
EditProduct.vue

Add code in resources/js/components/AllProduct.vue file; in here we are getting all data from database and deleting single product object from database through vue component.

Place code in resources/js/components/CreateProduct.vue file:

Go to resources/js/components/EditProduct.vue template and add the below code:

Create Vue CRUD Routes

Now we will create Vue JS CRUD routes as following

Define Vue App.js

resources/js/app.js file:

Start Laravel Vue CRUD App

Now we are ready to run our example so lets start the development server using following artisan command –

Now, open the following URL in browser to see the output –

In this tutorial we have learn about the How to Create Laravel 8 Vue JS CRUD Single Page Application (SPA) and its application with practical example. I hope you will like this tutorial.