Laravel Instant Search Example Using Vue Js and Debounce

Hello Developer, in this new tutorial i am going to show you how you can build laravel vue instant search for your laravel application. This is the laravel vue js real time search example tutorial. In this tutorial i will show you that, if you enter any key in search form, then the search data will be showed in page without page refresh.

You can use it vue js server side search or client side search. I will use axios get request to create laravel vuejs search example. I will discuss about Laravel vue js search from scratch so that you can unserstand it better. I will show you how to search data using vue js in Laravel with pagination using debounce.

Let's start our laravel vue search filter example. You will learn laravel vue js live search from this tutorial. let's go. 


Step 1: Install Laravel 

I will show you instant search laravel step by step from scratch. So we have to download laravel first. Run below command.

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


Step 2:  Create Migration

We need user table. So paste this below code to users table

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUnitsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('units', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()


Now run php artisan migrate to migrate our table.

php artisan migrate


We need to setup our Unit model. so paste this below code


namespace App;

use Illuminate\Database\Eloquent\Model;

class Unit extends Model
    protected $guarded = [];


Step 3:  Create Route

We have to first fetch the data then we have to create search data option. So we need many routes like below. So update your web.php file like below.


Route::get('/unit', 'UnitController@view_unit')->name('view');
Route::get('/search_unit', 'UnitController@search_unit_by_key');

And update api.php 



		'unit' => 'API\UnitController'


Step 4:  Create Controller

Now we need controller to create those avobe method. so create contoller and paste this below code.

php artisan make:controller API/UnitController --api



namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Unit;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class UnitController extends Controller
    public function view_unit()
        return view('unit');

    public function search_unit_by_key()
    	$key = \Request::get('q');
        $unit = Unit::withCount('products')

    	return response()->json([ 'unit' => $unit ],Response::HTTP_OK);



And also update our API Unit controller to create search with vue js in laravel.


namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use App\Unit;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class UnitController extends Controller

    public function index( Request $request )
        return $request->ajax() ? Unit::paginate(5) : abort(404);


Step 5:   Setup Vue

If you want to install vue in your laravel 7 project then install following laravel ui composer package to get it. So run below command

composer require laravel/ui


Install Vue

php artisan ui vue


Now run this command to install laravel vue pagination package

npm install laravel-vue-pagination

Now our setup is completed. Now we just need to change our app.js file and our component file.



now update the app.js file like belew



window.Vue = require('vue');

Vue.component('pagination', require('laravel-vue-pagination'));

Vue.component('unit-component', require('./components/UnitComponent.vue').default);

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


Step 5:   Create blade file

Now time to setup our blade file. open resources/layouts/app.php and paste this following code.



Now open resources/views/post/create.blade.php file and paste this code. 



Now all are set to go. Now just we have to compile our all javascript file. so run below command.

npm run dev 


Read also: Like Dislike Features in Laravel 7 using Vue Js


Now just visit the below url to see Laravel vue js live search example without page refresh with pagination using debouce.



After completing this In tutorial, now we can use axois in vue js request to fetch data, we can use debounce to search data in vue js with laravel. We can make pagination in vue js with pagination package. lot's of thing we've learnt from this laravel vue js live search tutorial.