How in laravel / inertiajs app use pagination component?

Question

On laravel 10 / inertiajs 2 I have list of products :

class HomeController extends Controller
{
    public function index(Request $request)
    {

        return Inertia::render('Home/Index', [
            'products' => ProductResource::collection($products),
            ...
        ]);

and in vue file :

<template>
        <div>
            <Products :products= "products" ></Products>
            ...
        </div>
</template>

<script>
import Products from '@/Pages/Home/Components/Products.vue'
...
export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },

    name: 'personalProductsList',
    components: {
        ...
    },
    setup(props) {
        let products = ref(props.products.data)
            ...

and in component resources/js/Pages/Home/Components/Products.vue :

<template>
    <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8 d1">
        <template v-for="product in products" :key="product.id">
            <ProductItem :product="product"></ProductItem>
        </template>
    </div>

    <div class="p-2 frontend_pagination" v-show="showPagination && totalProductsCount > 1">
        <vue-awesome-paginate
            :total-items="totalProductsCount"
            :items-per-page="homeProductsPerPage"
            :max-pages-shown="5"
            v-model="currentPage"
            @click="paginateClick"
        />
    </div>

</template>

<script>
import {router, usePage} from '@inertiajs/vue3';

...
export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },

    name: 'frontendProductsList',
    // filterCategoryItems
    components: {
        ...
    },
    setup(props) {

        console.log('props::')
        console.log(props)
        let products = ref(props.products)

List of products is shown ok, but how can I use vue-awesome-paginate component ? It has paginateClick method:

function paginateClick(page) {
    console.log('paginateClick page::')
    console.log(page)
    currentPage.value = page
}

But how correctly to open other page binside of this method ? Can I use vue-awesome-paginate component here ?

Hoang · Accepted Answer · 2025-03-03 03:42:46Z

1

You could do something like this:

import {router} from '@inertiajs/vue3'

const paginateClick = (page) => {
    // Creates a URLSearchParams object from the current URL’s query string.
    const currentUrl = window.location.pathname;

    const query = new URLSearchParams(window.location.search);

    // Only update page parameter 
    query.set('page', page);

    // Performs a full page reload using Inertia’s router.get(), redirecting the user to the updated URL.
    router.get(`${currentUrl}?${query.toString()}`)
}

Why This Approach?

Preserves Other Query Parameters

Unlike some pagination methods that replace the entire query string, this method keeps all existing parameters (e.g., filters, search terms) while only changing the page value.

Uses Inertia's Navigation System:

Instead of making a manual API request for pagination, this method redirects the user to a new page using Inertia’s routing. This ensures that server-side pagination still works as expected, and the UI remains consistent with Inertia’s workflow.

Prevents Fetching Issues:

The usual API-based pagination often fetches new data without changing the URL, making it difficult to share or bookmark specific pages. By updating the URL and using Inertia’s navigation, this approach ensures deep linking (users can refresh the page and stay on the correct page).

edited Mar 3 at 3:42

answered Feb 27 at 6:58

Hoang

742 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jeremy Caney Mar 2 at 6:05

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Hoang Mar 3 at 3:46

@JeremyCaney Thank you for your feedback! I have updated my answer with additional details to explain the code more clearly.

Collectives™ on Stack Overflow

How in laravel / inertiajs app use pagination component?

1 Answer 1

Why This Approach?

Preserves Other Query Parameters

Uses Inertia's Navigation System:

Prevents Fetching Issues:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Why This Approach?

Preserves Other Query Parameters

Uses Inertia's Navigation System:

Prevents Fetching Issues:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related