Need help with laravel-vue-pagination?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

gilbitron
531 Stars 103 Forks MIT License 126 Commits 27 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 26,110
WordPre...
Markdow...
Laravel
Bootstr...
74 commits
# 270,481
JavaScr...
Bootstr...
Shell
Sass
6 commits
# 317,585
dropbox
JavaScr...
HTML
Laravel
5 commits
# 122,863
Django
JavaScr...
WordPre...
masonry
3 commits
# 731
GitHub
Laravel
rust-la...
wechat-...
2 commits
# 36,547
HTML
TypeScr...
Nuxt.js
nuxtjs
1 commit
# 424,381
JavaScr...
HTML
Laravel
Bootstr...
1 commit
# 34,569
danmaku
vercel
CSS
PHP
1 commit
# 26,648
Laravel
PHP
stripe
vue3
1 commit
# 486,169
JavaScr...
HTML
Laravel
Bootstr...
1 commit

Build Status npm Downloads

Want your logo here? Sponsor me on GitHub

Laravel Vue Pagination

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

Requirements

Install

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

Demo

See https://laravel-vue-pagination.now.sh

Usage

Register the component:

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

Use the component:

  • {{ post.title }}

export default {

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

    mounted() {
        // Fetch initial results
        this.getResults();
    },

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

}

Customizing Prev/Next Buttons

Prev/Next buttons can be customized using the

prev-nav
and
next-nav
slots:
    < Previous
    Next >

API

Props

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

Events

| Name | Description | | --- | --- | |

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

Development

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:

Credits

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.