laravel-vue-bulma-paginator v1.0.0

Laravel Vue Bulma Pagination

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

Requirements

• Vue.js 2.x
• Laravel 5.x
• Bulma 0.7.x

Install

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

Usage

Register the component:

Vue.component('pagination', require('laravel-vue-bulma-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

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

Events

Credits

Laravel Vue Bulma Pagination was created by Gilbert Pellegrom from Dev7studios as Laravel Vue Pagination with support for Bootstrap. And Forked by George Raphael to provide support for Bulma. Released under the MIT license.