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

Install

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

Usage

Register the component:

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

Use the component:

<ul>
    <li v-for="post in laravelData.data" v-text="post.title"></li>
</ul>

<pagination :data="laravelData" v-on:pagination-change-page="getResults"></pagination>
HTML
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;
				});
		}
	}

});
JavaScript

Customizing Prev/Next Buttons

Prev/Next buttons can be customized using the prev-nav and next-nav slots:

<pagination :data="laravelData">
	<span slot="prev-nav">&lt; Previous</span>
	<span slot="next-nav">Next &gt;</span>
</pagination>
HTML

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,
}
JavaScript

GitHub

A Vue.js pagination component for Laravel paginatorsRead More

Latest commit to the master branch on 12-12-2024
Download as zip