Laravel Vue Js Delete Multiple Records Using Checkbox Example

Hello Artisan 

In this tutorial, I am going to show you step by step how to delete multiple rows using the checkbox in laravel. It is a common requirement in every application.

you will know that It almost needs to give a feature to remove multiple records using a checkbox, if you are developing an e-commerce application or any big web application then you must give a feature to delete multiple records.

So for this tutorial, i have a user table. I will delete every user at a time or multiple selected users at a time. you can do whatever you want. That means you can also delete a single record or two or as many as you want.

So how to delete multiple records using the checkbox in laravel? If you don't know then you can follow the below tutorial which I already made using jquery and ajax.


Read also : Delete Multiple Records Via Checkbox Using jQuery Ajax in Laravel


But in this tutorial for delete multiple rows i am using laravel 7 and vue js. Hope it will be very easy to do it rather than using jquery ajax. Let's start our multiple delete in laravel vue tutorial.

Preview : Before selecting users

how to delete multiple rows using checkbox in laravel


Preview : After selecting specific user

how to delete multiple records using checkbox in laravel 6


Preview : After hitting select all checkbox button

laravel 6 delete multiple rows


Preview : Before all delete 


Now if you select delete all then our all users will be deleted. So let's start multiple rows deleted exmple tutorial using laravel and vue js.

Step 1: Laravel Installation

In first step, If you haven't installed Laravel in your system then you have to run bellow command and get fresh Laravel project.

composer create-project --prefer-dist laravel/laravel blog


Step 2: Define the routes

Now, we need to define the API routes inside the routes >> web.php file.




Step 3 : Create Controller

To quickly create UserController, run below command

php artisan make:controller UserController 


Now open user controller and paste those following code.


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class UserController extends Controller
    public function index()

        return response()->json([
            'users' => \App\User::latest()->get()
        ], Response::HTTP_OK);

    public function delete_user($id)
       $single_user_id = explode(',' , $id);

       foreach($single_user_id as $id) {



Step 4 :  Setup Vue

Now, go inside the project folder and install the frontend dependencies using the following command.

npm install


Step 5: Setup app.js file



window.Vue = require('vue');

Vue.component('user-component', require('./components/UserComponent.vue').default);

const app = new Vue({
    el: '#app',


Read also : Laravel 6 Ajax Form Submit With jQuery Validation


Step 6 : Create UserComponent

Now we have to create user component and after creating user component, just paste this below code to complete our laravel vue js delete multiple rows tutorial.



Step 7 : Create Blade File to View User

Now we have to create our view file to see our users table. So create it inside this following delectory



Now run this below command to compile our entire javascript file. 

npm run dev
npm run watch

Now if you visit this below url


After creating some dummy users, you should see the below image


You can simply use tinker to make dummy users. Just do it

php artisan tinker
// then


And now you are ready to check this project. Hope this delete multiple records via checkbox using laravel and vue js tutorial will help you. 

#laravel #vue-js #axios