Laravel Vue Js Search Example With Pagination

Hello Artisan

In this tutorial i am coming with a brand new tutorial on the topic of Laravel vue js instant data search. Many web application you will follow that a real time data searching without page refrech is needed to get better user experience. In this tutorial i will show you step by step that how you can create you own search query with Laravel and vue js.

I will show you Laravel live search example with vue js and also we fetch data using axios get request. We will fetch data with pagination. I will use debounce from lodash to make our perfermance better. So you will learn lot's of thing from this Laravel vue js search example tutorial.

Let's see how we can create this instant search example without page refresh in Laravel using Vue js.

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:  Make 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->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:  Make 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. Now we need Unit controller and a API Unit 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::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:   Install 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 to create live search in larave and vue js

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 to make laravel vue js live search.

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: Laravel Vue JS CRUD Example With File Upload and Pagination

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

Now all are set to go. Please check it and ask me anything if you need any help from this tutorial. Hope you have learnt lots of thing from this Laravel vue js search tutorial.