Shetabit laravel vue pagination

Vue.js pagination component for Laravel paginators and Bootstrap styles

Version Version: 2.3.7 Version Updated: 06/22/2021 By: shetabit License: MIT

DownloadsLast30Days: 322

npm i shetabit-laravel-vue-pagination
yarn add shetabit-laravel-vue-pagination


This is a fork from Laravel vue pagination with support of router-link. It also adds links to buttons so that the user can open the page in a new tab and crawlers index other pages.

Laravel Vue Pagination

A Vue.js pagination component for Laravel paginators that works with Bootstrap.



npm install laravel-vue-pagination
// or
yarn add laravel-vue-pagination




Register the component:

Vue.component('pagination', require('laravel-vue-pagination'));

Use the component:

    <li v-for="post in" :key="">{{ post.title }}</li>

<pagination :data="laravelData" @pagination-change-page="getResults"></pagination>
export default {

    data() {
        return {
            // Our data object that holds the Laravel paginator data
            laravelData: {},

    mounted() {
        // Fetch initial results

    methods: {
        // Our method to GET results from a Laravel endpoint
        getResults(page = 1) {
            axios.get('example/results?page=' + page)
                .then(response => {
                    this.laravelData =;


Customizing Prev/Next Buttons

Prev/Next buttons can be customized using the prev-nav and next-nav slots:

<pagination :data="laravelData">
    <span slot="prev-nav">&lt; Previous</span>
    <span slot="next-nav">Next &gt;</span>

Customizing Page Buttons

<template v-slot:page="{href, page, isCurrentPage, pageButtonEvents}">
    <a class="page-link" :href="href" v-on="pageButtonEvents(page)">
        {{ page }}
        <span class="sr-only" v-if="isCurrentPage">(current)</span>



Name Type Description
data Object An object containing the structure of a Laravel paginator response or a Laravel API Resource response.
limit Number (optional) Limit of pages to be rendered. 0 shows all pages (default). -1 will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. 2) will define how many pages should be shown on either side of the current page when only a range of pages are shown.
show-disabled Boolean (optional) Show disabled prev/next buttons instead of hiding them. false hides disabled buttons (default). true shows disables buttons.
size String (optional) One of small, default or large
align String (optional) One of left (default), center or right
router Boolean (optional) If true clicking pages will change the route


Name Description
pagination-change-page Triggered when a user changes page. Passes the new page index as a parameter.


To work on the library locally, run the following command:

npm run serve

To run the tests:

npm run test

Show your Support

To show your support for my work on this project:


Laravel Vue Pagination was created by Gilbert Pellegrom from Dev7studios. Released under the MIT license.

Copyright © 2020