Laravel 10 Vue 3 Search Filter with Pagination

Hello, web developers! In this article, we'll see how to search with pagination in laravel 10 vue 3. In this guide, we'll create a simple product list that supports search functionality and pagination.

In this article, we'll see pagination with search filter vue 3 laravel 10. Also, we'll install Axios for the API.

So, let's see the laravel 10 vue 3 search filter with pagination.

In this step, we'll install the laravel 10 application using the following command.

composer create-project --prefer-dist laravel/laravel laravel-vue-search-pagination
cd laravel-vue-search-pagination

 

Next, we'll create a model and migration using the following command.

php artisan make:model Product -m

Migration:

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        // Add other fields as needed
        $table->timestamps();
    });
}

Run the migration:

php artisan migrate

 

 

Next, we'll create a seeder for the products table using the following command.

php artisan make:seeder ProductsTableSeeder

database/seeders/ProductsTableSeeder.php

public function run()
{
    \App\Models\Product::factory(50)->create();
}

Run the seeder:

php artisan db:seed --class=ProductsTableSeeder

 

Then, we'll create a controller for managing products using the following command.

php artisan make:controller ProductController

app/Http/Controllers/ProductController.php

use App\Models\Product;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    public function index()
    {
        return view('products.index');
    }

    public function getProducts(Request $request)
    {
        $search = $request->input('search');
        $products = Product::when($search, function ($query) use ($search) {
            return $query->where('name', 'like', "%$search%");
        })->paginate(10);

        return $products;
    }
}

 

Define API routes in routes/api.php:

use App\Http\Controllers\ProductController;

Route::get('/products', [ProductController::class, 'getProducts']);

 

Install the required npm packages:

npm install axios vue@next vuex@next

Create a Vue component for the product list (resources/js/components/ProductList.vue):

<template>
  <div>
    <input v-model="search" @input="searchProducts" placeholder="Search products" />
    <ul>
      <li v-for="product in products.data" :key="product.id">{{ product.name }}</li>
    </ul>
    <pagination :data="products" @pagination-change-page="getProducts" />
  </div>
</template>

<script>
import axios from 'axios';
import Pagination from 'laravel-vue-pagination';

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      products: {},
      search: '',
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts(page = 1) {
      axios.get(`/api/products?page=${page}&search=${this.search}`).then(response => {
        this.products = response.data;
      });
    },
    searchProducts() {
      this.getProducts();
    },
  },
};
</script>

 

 

Next, create a blade file and  includes the Vue component:

resources/views/products/index.blade.php

@extends('layouts.app')

@section('content')
    <div id="app">
        <product-list></product-list>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
@endsection

 

Run the following command to compile your assets:

npm run dev

 

Run the laravel 10 application using the following command.

php artisan serve

 

---

You might also like:

• Read Also: How to Display Toastr Notification in Bootstrap Vue JS
• Read Also: How to Display Tooltip in Bootstrap Vue JS
• Read Also: Laravel 10 With Vue JS CRUD Operation
• Read Also: How to Create Laravel 10 Vue 3 Authentication

---