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

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) | truefalse | 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) | defaultbootstrapcustom | 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) | nullleftcenterright | 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 | | activeClassIn | String (optional) | lia | li | Active class placement | |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| | disableClassIn | String (optional) | lia | li | Disable class placement | | autoHidePaginate | Boolean (optional) | truefalse | true | Auto hide paginator if has not more than one page |

###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