Vue Cli Laravel Pagination

vue-cli-laravel-pagination is a plugin for implementing laravel pagination in on a vue cli based project. it's light weight, easy to use, well documented and has best support.

Requirements

• Vue.js 2.x
• Laravel 5.x or upper

Install

npm install vue-cli-laravel-pagination

Usage

In your main.js:

import VueLaravelPagination from "vue-cli-laravel-pagination";


Vue.use(VueLaravelPagination)

Use the component:

<vue-cli-laravel-pagination :data="laravelData" align="center" :onChange="changed_value" buttonLimit="10"></vue-cli-laravel-pagination>

export default {

	data() {
		return {
			laravelData: {},
		}
	},
	mounted() {
		this.fetch();
	},
	methods: {
        // Detect page change event
        changed_value(options){
            console.log(options.page)
            this.fetch(options.page)
        },

		// Fetch data from a Laravel endpoint
	fetch(page = 1) {
		axios.get('example.com/fetch-url-here?page=' + page)
			.then(response => {
			    this.laravelData = response.data;
			});
	    }
	}

}

API

Name	Type	Description
data	Object	An object containing the structure of a Laravel paginator response or a Laravel API Resource response.
align	String	(optional) One of left (default), center or right
onChange	Function	Callback event to detect button click and get selected page count
buttonLimit	Number	(optional) Numbers of pages to show default 5
prevBtn	String/HTML	(optional) Customize previous button
nextBtn	String/HTML	(optional) Customize Next button

Show your Support

To show your support for my work on this project:

• Star this repository

Credits

Vue Cli Laravel Pagination was created by Ahmed Zobayer. Released under the ISC license.