advanced-laravel-vue-paginate v0.3.0

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

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