Want your logo here? Sponsor me on GitHub

Laravel Vue Pagination

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

Requirements

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

Install

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

Demo

See https://laravel-vue-pagination.now.sh

Usage

Register the component:

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

Use the component:

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

<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
		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;
				});
		}
	}

}

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>

API

Props

Events

Development

To work on the library locally, run the following command:

npm run serve

To run the tests:

npm run test

Show your Support

To show your support for my work on this project:

• Star this repository
• Tell others about this project
• Sponsor me on GitHub

Credits

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