Laravel 8 Vue JS Live Search Tutorial

In this tutorial you will learn about the Laravel 8 Vue JS Live Search Tutorial and its application with practical example.

In this Laravel 8 Vue JS Live Search Tutorial I will show you how to create a live search box in laravel Vue Js application. In this tutorial you will learn to create live search input box in laravel vue js application. In this article I will share example to create a dynamic ajax driven live search in Laravel with Vue Js. In this tutorial we will create a dynamic live search autocomplete which will fetch options from database table In Vue Js laravel application .

Table Of Contents−

Laravel 8 Vue JS Live Search Tutorial

In this step by step tutorial I will demonstrate you to create a live search box in laravel Vue Js application. Please follow the instruction given below:

Step 1: Install Laravel 8 App
Step 2: Connecting App to Database

Step 3: Run Make auth Command
Step 4: Create Model And Migration
Step 5: NPM Configuration

Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component

Step 9: Create Blade Views And Initialize Vue Components
Step 10: Run Development Server

Step 1: Install Laravel 8 App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Connecting App to Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Run Make auth Command

In this step we will run following commands to install laravel/ui and implement auth system:

cd blog
composer require laravel/ui --dev
php artisan ui vue --auth

cd blog

composer require laravel/ui --dev

php artisan ui vue --auth

This laravel laravel/ui package builds scaffold all of the routes, controller and views for authentication.

Step 4: Create Model And Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -fm

1	php artisan make:model Post -fm

The above command will create a model name post.php and also create a migration file for the posts table. Now open create_posts_table.php migration file from database>migrations and replace up() function with following code:

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
       Schema::create('posts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->string('slug');
            $table->unsignedBigInteger('user_id');
            $table->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->string('slug');

$table->unsignedBigInteger('user_id');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

Now, in this step we will create model and migration file. Please run the following command:

php artisan migrate

1	php artisan migrate

Now, go to app/Models/Post.php and put the following code into your Post.php model as follow:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
 
    protected $guarded = [];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

protected $guarded = [];

}

Now, go to database/factories and open PostFactory.php. Then update the following code into it as follow:

<?php
 
use Faker\Generator as Faker;
 
use App\Models\Post;
 
$factory->define(Post::class, function (Faker $faker) {
    return [
       'title' => $faker->sentence,
       'slug' => \Str::slug($faker->sentence),
       'user_id' => 1
    ];
});

<?php

use Faker\Generator as Faker;

use App\Models\Post;

$factory->define(Post::class, function (Faker $faker) {

return [

'title' => $faker->sentence,

'slug' => \Str::slug($faker->sentence),

'user_id' => 1

];

});

Now we will run following command to generate fake data using faker as follow:

php artisan tinker
//and then
factory(\App\Models\Post::class,30)->create()

php artisan tinker

//and then

factory(\App\Models\Post::class,30)->create()

Step 5: NPM Configuration

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Step 6: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\PostController;
 
Route::get('search', [PostController::class, 'index']);
 
Route::get('res-search', [PostController::class, 'search']);

use App\Http\Controllers\PostController;

Route::get('search', [PostController::class, 'index']);

Route::get('res-search', [PostController::class, 'search']);

Step 7: Create Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

Now, go to app\Http\Controllers and open PostController.php file. Then update the following code into your PostController.php file:

<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Facades\App\Repository\Posts;
class PostController extends Controller
{
    public function index()
    {   
        return view('search');
    }
    public function search(Request $request)
    {
        $posts=Post::where('title',$request->keywords)->get();
        return response()->json($posts);
         
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Post;

use Illuminate\Http\Request;

use Facades\App\Repository\Posts;

class PostController extends Controller

{

public function index()

{

return view('search');

}

public function search(Request $request)

{

$posts=Post::where('title',$request->keywords)->get();

return response()->json($posts);

}

Step 8: Create Vue Component

In this step we will create a Vue component. Go to resources/assets/js/components folder and create a file called SearchComponent.vue. Now, put the following code into your SearchComponent.vue components file:

<template>
    <div>
        <input type="text" v-model="keywords">
        <ul v-if="results.length > 0">
            <li v-for="result in results" :key="result.id" v-text="result.name"></li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            keywords: null,
            results: []
        };
    },
    watch: {
        keywords(after, before) {
            this.fetch();
        }
    },
    methods: {
        fetch() {
            axios.get('/res-search', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }
    }
}
</script>

<div>

</ul>

</div>

</template>

export default {

data() {

return {

keywords: null,

results: []

};

watch: {

keywords(after, before) {

this.fetch();

}

methods: {

fetch() {

axios.get('/res-search', { params: { keywords: this.keywords } })

.then(response => this.results = response.data)

.catch(error => {});

}

</script>

Now open resources/assets/js/app.js and include the SearchComponent.vue component as follow:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('search-component', require('./components/SearchComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('search-component', require('./components/SearchComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 9: Create Blade Views And Initialize Vue Components

In this step we will create blade files. Go to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, go to resources/views/layouts and open app.blade.php file. Then update the following code into your app.blade.php file as follow:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 8 Vue JS Live Search Example Tutorial</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @stack('fontawesome')
</head>
<body>
    <div id="app">
        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Laravel 8 Vue JS Live Search Example Tutorial</title>

@stack('fontawesome')

</head>

<body>

@yield('content')

</main>

</div>

</body>

</html>

Next, go to resources/views/ and create one file name search.blade.php. Then put the following code into your search.blade.php file as follow:

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
         
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue Js Live Search</div>
                     
                <div class="card-body">
                  <search-component></search-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection

@extends('layouts.app')

@section('content')

<div class="card-header">Laravel Vue Js Live Search</div>

<search-component></search-component>

</div>

@endsection

Step 10: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Vue JS Live Search Tutorial