Advanced-Laravel-Vue-Paginate

A advanced, smart, highly customizable vue pagination component for Laravel Pagination

Demo & Playground

See https://shibbirweb.github.io/advanced-laravel-vue-paginate

Requirements

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

Install

npm install advanced-laravel-vue-paginate --save

Usage

Register the component:

// register as a global Vue component
import 'advanced-laravel-vue-paginate/dist/advanced-laravel-vue-paginate.css'
Vue.use(require('advanced-laravel-vue-paginate'));

// or, import as a single Vue component
import AdvancedLaravelVuePaginate from 'advanced-laravel-vue-paginate';
import 'advanced-laravel-vue-paginate/dist/advanced-laravel-vue-paginate.css'

// register in vue component
export default {
	components: {
		AdvancedLaravelVuePaginate
	}
}

// or, use as a cdn
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/advanced-laravel-vue-paginate"></script>

Use the component:

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

<advanced-laravel-vue-paginate :data="laravelData" @paginateTo="getResults"/>

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

API

Props

Name	Type	Parameter	Default	Description
data	Object (required)	Laravel paginate default object		An object containing the structure of a Laravel paginator response.
onEachSide	Number (optional)	Any Integer number	3	Number of page number show each side of current page. Any negative value show all page links.
showNextPrev	Boolean (optional)	true false	true	Show next/previous button. true for show Next/Previous button and false for hide next/previous button
dots	String (optional)	Any String value	...	Symbol for hidden page numbers
previousText	String (optional)	Any String value	Previous	Text for previous button
nextText	String (optional)	Any String value	Next	Text for next button
useStyle	String (optional)	default bootstrap custom	default	default for default component style. bootstrap for bootstrap style (required Bootstrap). custom for custom style. Use ↙ below props to style as you want.
alignment	String (optional)	null left center right	null	Custom alignment of pagination. null for default style, left for align to left, center for align to center, right for align to right
activeClass	String (optional)	Any String value	active	Class for current pagination page
listClass	String (optional)	Any String value	pagination	List (ul) class
listItemClass	String (optional)	Any String value	page-item	Class for List item (li)
contentAlignClass	String (optional)	Any String value	justify-content-center	Content align class
linkClass	String (optional)	Any String value	page-link	Anchor link (a) class
disableClass	String (optional)	Any String value	disabled	Disable class name

###Events

Name	Return	Description
paginateTo	Number	Invoked when user click on a pagination link and return clicked page number

---

For Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve