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







Follow us
facebooklogo github instagram twitter

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

Please add websolutionstuff to your ad blocking whitelist or disable your adblocking software.

×