Laravel 9 Vue JS Search Example

In this article, we will see a laravel 9 vue js search example. Here, we will learn how to live search in laravel 9 using vue js. So, we will give a simple search example using vue js in laravel 8 and laravel 9. Also, you can use any jquery or laravel package for live search.

So, let's see vue js live search in laravel 9, vue js pagination with search in laravel 9, laravel 9 vue js live search, and laravel 9 full-text search.

 

In this step, we will install laravel 9 using the following command.

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

 

After that, we will set up the database configuration in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel9_vuejs_example
DB_USERNAME=root
DB_PASSWORD=root

 

 

In this step, we will create a laravel authentication system using the following command.

composer require laravel/ui --dev

php artisan ui vue --auth

 

In this step, we will create a model and migration using the following command.

php artisan make:model Post -fm

Migration:

<?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->timestamps();
      });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

app/Models/Post.php

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

 

 

In this step, we will install vue and its dependencies using the following command.

php artisan preset vue

npm install

 

Now, we will create routes in the web.php file.

routes/web.php

<?php

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

 

After that, we will create PostController using the following command.

php artisan make:controller PostController

app/Http/Controllers/PostController.php

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

    public function search(Request $request)
    {
        $posts=Post::where('title',$request->keywords)->get();
        return response()->json($posts);
         
    }
}

 

In this step, we will create PostComponent.vue in the resources/assets/js/components folder.

<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('/response-search', { params: { keywords: this.keywords } })
                .then(response => this.results = response.data)
                .catch(error => {});
        }
    }
}
</script>

Now, open the resources/assets/js/app.js file and include PostComponent.

require('./bootstrap');

window.Vue = require('vue');

Vue.component('post-component', require('./components/PostComponent.vue').default);

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

 

 

In this step, we will create an app.blade.php file and add the following code to that file.

 resources/views/layouts/app.blade.php

<!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 9 Vue JS Search Example - Websolutionstuff</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>

Now, create a post.blade.php file and add the following code to that file.

resources/views/post.blade.php

@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 9 Vue JS Search Example</div>
                     
                <div class="card-body">
                  <post-component></post-component>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection 

 

Now, we will run laravel 9 live search using the vue js application using the following command.

php artisan serve

npm run dev
or 
npm run watch

 

---

You might also like:

• Read Also: Autocomplete Search using Bootstrap Typeahead JS
• Read Also: Server Side Custom Search in Datatables
• Read Also: Laravel 9 Vue JS CRUD Operation Example
• Read Also: Laravel 9 Vue 3 Image Upload Example