How to Search with Pagination in Laravel 10 Vue 3

Hey everyone! Ever found yourself in need of a straightforward example for integrating search and pagination in a Laravel and Vue.js application? Well, you're in the right place! In this guide, we're going to embark on a journey together to 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, you can use this example in Laravel 8, Laravel 9, and Laravel 10.

Whether you're a seasoned developer or just dipping your toes into Laravel and Vue.js, we'll walk through the process step by step.

Ready to boost your web app with search and pagination? Let's dive in and make this coding adventure a breeze! 🚀💻

If you haven't already, create a new Laravel project:

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

Generate a model and migration for the example. For this example, let's use a Product model:

php artisan make:model Product -m

In the migration file (database/migrations/yyyy_mm_dd_create_products_table.php), define the table structure:

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

Create a seeder for the products table:

php artisan make:seeder ProductsTableSeeder

In the seeder (database/seeders/ProductsTableSeeder.php), add some sample data:

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

Run the seeder:

php artisan db:seed --class=ProductsTableSeeder

Generate a controller for managing products:

php artisan make:controller ProductController

In the controller (app/Http/Controllers/ProductController.php), implement methods for fetching and searching products:

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>

Create a Blade view (resources/views/products/index.blade.php) that includes the Vue component:

@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

Well, there you have it! We've successfully crafted a straightforward Laravel and Vue.js example that showcases the power of search and pagination.

Navigating through the process, we've set up a Laravel backend, seeded a database, and seamlessly integrated Vue.js for a dynamic frontend experience.

Happy coding! 🚀🌐

You might also like:

• Read Also: Laravel mix is not recognized as an internal or external command
• Read Also: Razorpay Payment Gateway Integration in Laravel 10 and VueJS 3
• Read Also: How To Build Live Chat App In Laravel 9 And Vue JS
• Read Also: Dependent Dropdown In Laravel 9 Vue JS