Laravel 9 Vue JS Search Example

Websolutionstuff | Dec-14-2022 | Categories : Laravel VueJs

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.

Step 1: Install Laravel 9 Application

Step 2: Connecting App to Database

Step 3: Run Auth Command

Step 4: Create Model And Migration

Step 5: NPM Configuration

Step 6: Add Routes

Step 7: Create Controller

Step 8: Create Vue JS Component

Step 9: Create Blade Files

Step 10: Run Laravel Application

 

Step 1: Install Laravel 9 Application

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

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

 

Step 2: Connecting App to Database

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

 

 

Step 3: Run Auth Command

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

composer require laravel/ui --dev

php artisan ui vue --auth

 

Step 4: Create Model And Migration

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

 

 

Step 5: NPM Configuration

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

php artisan preset vue

npm install

 

Step 6: Add Routes

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

 

Step 7: Create Controller

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

 

Step 8: Create Vue JS Component

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

 

 

Step 9: Create Blade Files

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 

 

Step 10: Run Laravel Application

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:

Recommended Post
Featured Post
Laravel Rollback Targeted Migration Reversals
Laravel Rollback Targeted Migr...

As a Laravel developer, I understand the significance of migrations in managing database changes and maintaining a consi...

Read More

May-29-2023

Laravel 9 MongoDB CRUD Operation Tutorial
Laravel 9 MongoDB CRUD Operati...

In this article, we will see the laravel 9 MongoDB crud operation tutorial. In laravel, we will have many crud operation...

Read More

Dec-06-2022

Fixed: Class "DOMDocument" Not Found In Laravel
Fixed: Class "DOMDocument" Not...

In this article, we will see to fixed class "DOMDocument" not found in laravel. Also, class 'domdocum...

Read More

Feb-17-2023

Laravel tips: DB Models and Eloquent - 2023
Laravel tips: DB Models and El...

Welcome to the fourth installment of our "Laravel Tips: DB Models and Eloquent" series. In this article, we co...

Read More

Oct-18-2023