How to Search with Pagination in Laravel 10 Vue 3

Websolutionstuff | Jan-01-2024 | Categories : Laravel VueJs

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! 🚀💻

Step 1: Install Laravel

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

 

Step 2: Create a Model and Migration

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

 

 

Step 3: Seed the Database

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

 

Step 4: Create a Controller

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

 

Step 5: Create API Routes

Define API routes in routes/api.php:

use App\Http\Controllers\ProductController;

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

 

Step 6: Set Up Vue.js

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>

 

 

Step 7: Set Up Blade View

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

 

Step 8: Run Laravel Mix

Run the following command to compile your assets:

npm run dev

 

Step 9: Run Your Laravel Application

Run the laravel 10 application using the following command.

php artisan serve

 

Conclusion:

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:

Recommended Post
Featured Post
How To Install PHP XML Extension In Ubuntu
How To Install PHP XML Extensi...

In this article, I will guide you through the process of installing the PHP XML extension in Ubuntu. The PHP XML extensi...

Read More

Jul-19-2023

How To Get Client IP Address In Laravel 10
How To Get Client IP Address I...

In this article, we will see how to get a client's IP address in laravel 10. Here we will learn about retrieving the...

Read More

Apr-07-2023

How to Install and Configure Elasticsearch on Ubuntu
How to Install and Configure E...

Hey there! Today, I'm going to walk you through the process of installing and setting up Elasticsearch on your Ubunt...

Read More

Jan-08-2024

Carbon Add Months To Date In Laravel
Carbon Add Months To Date In L...

In this article, we will see an example of carbon add months to date in laravel. Here, we will give you a simple&nb...

Read More

Dec-05-2020