A Vue.js pagination component for Laravel paginators that works with Bootstrap
JavaScript Vue HTML
Clone or download
Latest commit f782a14 May 4, 2018


Build Status npm Downloads

Laravel Vue Pagination

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



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


Register the component:

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

Use the component:

    <li v-for="post in laravelData.data" :key="post.id">{{ post.title }}</li>

<pagination :data="laravelData" @pagination-change-page="getResults"></pagination>
export default {

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

	mounted() {
		// Fetch initial results

	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;


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>



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

screen shot 2018-01-12 at 4 47 50 pm


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


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