Laravel Vue Pagination
A Vue.js pagination component for Laravel paginators.
Requirements
For Vue 2 support use v2.
Install
|
1 2 3 |
npm install laravel-vue-pagination // or yarn add laravel-vue-pagination |
Usage
|
1 2 3 4 5 6 7 |
import LaravelVuePagination from 'laravel-vue-pagination'; export default { components: { 'Pagination': LaravelVuePagination } } |
|
1 2 3 4 5 |
<ul> <li v-for="post in laravelData.data" :key="post.id">{{ post.title }}</li> </ul> <Pagination :data="laravelData" @pagination-change-page="getResults" /> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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; }); } } } |
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. |
https://github.com/gilbitron/laravel-vue-pagination?ref=madewithvuejs.com
