Laravel Pagination with VueJS (customizable)

vue-laravel-paginex will provide you the ability to easily create pagination from Laravel Pagination object.

Photo by Arno Senoner on Unsplash

Installation

npm i vue-laravel-paginex

Usage

First import the Pagination component inside your Vue component.

import Pagination from 'vue-laravel-paginex'
Vue.component('Pagination', Pagination)

Example:

<Pagination :changePage="getData" :data="data"/>
methods: {
get(page) {
this.$http.get('getDataEndpoint?page=' + page).then(response => {
this.data = response.data
})
}
}
{
current_page: 1
data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of Africa", type: "Licensed",…},…]
first_page_url: "http://example.com/getDataEndpoint?page=1"
from: 1
last_page: 10
last_page_url: "http://example.com/getDataEndpoint?page=10"
next_page_url: "http://example.com/getDataEndpoint?page=2"
path: "http://example.com/getDataEndpoint"
per_page: 20
prev_page_url: null
to: 20
total: 200
}

Customizations

You can customize your pagination styles by overwriting default values. Available props for the component:

options:{
containerClass: "pagination-container",
prevButtonClass: "prev-button-class",
nextButtonText: "Next Page"
...
}

Credits

CEO @ lionix

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store