mihaliak/laravel-vue-pagination

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

Laravel Vue Pagination

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

Requirements

• Vue.js 2.x
• Laravel 5.x
• Bootstrap 3.x

Install

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

Usage

Register the component:

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

Use the component:

<pagination :data="laravelData" :limit="3" v-on:pagination-change-page="getResults"></pagination>

Vue.component('example-component', {

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

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

	methods: {
		// Our method to GET results from a Laravel endpoint
		getResults(page) {
			if (typeof page === 'undefined') {
				page = 1;
			}

			// Using vue-resource as an example
			this.$http.get('example/results?page=' + page)
				.then(response => {
					return response.json();
				}).then(data => {
					this.laravelData = data;
				});
		}
	}

});

API

Props

Name	Type	Description
limit	Number	Limit of pages to be rendered. Default 0 (unlimited links) -1 will hide numeric pages and leave only arrow navigation. 3 will show 3 previous and 3 next numeric pages from current page.
data	Object	An object containing the structure of a Laravel paginator response. See below for default value.

{
	current_page: 1,
	data: [],
	from: 1,
	last_page: 1,
	next_page_url: null,
	per_page: 10,
	prev_page_url: null,
	to: 1,
	total: 0,
}

Events

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

Credits

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