Skip to content
A Vue.js pagination component for Laravel paginators that works with Bootstrap
Branch: master
Clone or download
1
Latest commit 0546548 Mar 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist v2.3.0 Mar 1, 2019
public Add public/index.html template Mar 1, 2019
src Update App.vue Mar 1, 2019
tests/unit
.browserslistrc
.eslintignore Ignore tests when linting Sep 21, 2018
.eslintrc.js
.gitignore Update .gitignore Sep 7, 2018
.nowignore Add now config Mar 1, 2019
.travis.yml Re-add .travis.yml Sep 7, 2018
LICENSE Rebuild library as a single file component using Vue CLI 3 Sep 7, 2018
README.md Update README.md Mar 1, 2019
babel.config.js
jest.config.js Rebuild library as a single file component using Vue CLI 3 Sep 7, 2018
now.json
package.json Add now config Mar 1, 2019
postcss.config.js Rebuild library as a single file component using Vue CLI 3 Sep 7, 2018
yarn.lock Update packages Mar 1, 2019

README.md

Build Status npm Downloads

Laravel Vue Pagination

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

Requirements

Install

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

Demo

See https://laravel-vue-pagination.now.sh

Usage

Register the component:

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

Name Type Description
data Object An object containing the structure of a Laravel paginator response or a Laravel API Resource response.
limit Number (optional) Limit of pages to be rendered. 0 shows all pages (default). -1 will hide numeric pages and leave only arrow navigation. Any positive integer (e.g. 2) will define how many pages should be shown on either side of the current page when only a range of pages are shown.
show-disabled Boolean (optional) Show disabled prev/next buttons instead of hiding them. false hides disabled buttons (default). true shows disables buttons.
size String (optional) One of small, default or large
align String (optional) One of left (default), center or right

Events

Name Description
pagination-change-page Triggered when a user changes page. Passes the new page index as a parameter.

Development

To work on the library locally, run the following command:

npm run serve

To run the tests:

npm run test

Credits

Laravel Vue Pagination was created by Gilbert Pellegrom from Dev7studios. Released under the MIT license.

You can’t perform that action at this time.