How to Build Laravel Instant Search using Vue 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

PHP

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');
    }
}

PHP

Now run php artisan migrate to migrate our table.

php artisan migrate

PHP

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 = [];
}

PHP

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');

PHP

And update api.php

routes/api.php

Route::apiResources(
	[

		'unit' => 'API\UnitController'
	]
);

#laravel #vue #web-development #programming #developer

tutspack.com

How to Build Laravel Instant Search using Vue and Debounce