Laravel Vue Bulma Pagination
A Vue.js pagination component for Laravel paginators that works with Bulma.
Requirements
Install
npm install laravel-vue-bulma-pagination// oryarn add laravel-vue-bulma-pagination
Usage
Register the component:
Vue;
Use the component:
{{ post.title }}
{ return // Our data object that holds the Laravel paginator data laravelData: {} } { // Fetch initial results this; } methods: // Our method to GET results from a Laravel endpoint { axios ; }
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. See below for default value. |
limit |
Number | (optional) Limit of pages to be rendered. Default 0 (unlimited pages) -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 (see below for example output). |
Default data
current_page: 1 data: from: 1 last_page: 1 next_page_url: null per_page: 10 prev_page_url: null to: 1 total: 0
Example limit
Events
Name | Description |
---|---|
pagination-change-page |
Triggered when a user changes page. Passes the new page index as a parameter. |
Credits
Laravel Vue Bulma Pagination was created by Gilbert Pellegrom from Dev7studios as Laravel Vue Pagination with support for Bootstrap. And Forked by George Raphael to provide support for Bulma. Released under the MIT license.