Delete Multiple Records Using Checkbox In Laravel 6 And Vue Js

Hello Artisan,How to delete multiple rows using checkbox in Laravel and Vue? In this tutorial, I am going to show that how to delete multiple rows using checkbox in laravel with vue js. We can delete one or more rows at a time or we can delete all rows at a time using vue js checkbox laravel.

We are going to implement that delete all rows with click event using vue js and laravel. If you don't know how to delete records with checkbox then this example is for you. Let's see the example of how to delete multiple records or rows using checkbox in laravel vue js.

But in this tutorial for deleting 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 a 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 deleted 


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 the first step, If you haven't installed Laravel in your system then you have to run the bellow command and get a 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 the below command

php artisan make:controller UserController 


Now open the user controller and paste the 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) {



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


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 a user component and after creating a 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 deleting multiple records via checkbox using laravel and vue js tutorial will help you. 


#laravel #vue-js