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) {
            $table->increments('id');
            $table->string('name');
            $table->tinyInteger('is_active')->default(1);
            $table->integer('created_by')->nullable();
            $table->integer('updated_by')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('units');
    }
}

 

Now run php artisan migrate to migrate our table.

php artisan migrate

 

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

app/Unit.php

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.

routes/web.php

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

And update api.php 

routes/api.php

Route::apiResources(
	[

		'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

 

app/Https/Controller/UnitController.php

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')
                                    ->where('name','LIKE',"%{$key}%")
                                    ->orWhere('is_active','LIKE',"%{$key}%")
                                    ->get();

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

}

 

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

app/Https/Controller/API/UnitController.php

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.

resources/assets/js/components/UnitComponent.vue

 

now update the app.js file like belew

resources/js/app.js


require('./bootstrap');

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.

resources/views/layouts/app.blade.php

 

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

resources/views/unit.blade.php

 

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.

URL
http://localhost:8000/unit

 

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.