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

Overview

Build Status npm Downloads

Want your logo here? Sponsor me on GitHub

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:

{{ post.title }} ">
<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:

< Previous Next > ">
<pagination :data="laravelData">
	<span slot="prev-nav">< Previousspan>
	<span slot="next-nav">Next >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

Show your Support

To show your support for my work on this project:

Credits

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

You might also like...
A fork from Laravel vue pagination with support of router-link

This is a fork from Laravel vue pagination with support of router-link. It also adds links to buttons so that the user can open the page in a new tab and crawlers index other pages.

Simple Pagination For Laravel when using Inertia js with vue3

Simple Pagination For Laravel when using Inertia js with vue3

data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.

Please Note! This is the previous version that works with Vue 1.x. The most up-to-date version is the Vuetable-2. If you like it, please star the Vuet

Vue.js 2 pagination component

Vue Pagination 2 Using Vue 3? Check out the new component Click here to see it in action. Simple, generic and non-intrusive pagination component for V

A Vue.js(v2.x+) component for creating pagination.
A Vue.js(v2.x+) component for creating pagination.

vuejs-paginate A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate. Easy to use by providing simple api. And you can customize th

A Vue component for create a tiny pagination with Flexbox

Tiny Pagination · A Vue component for create a tiny paginate with Flexbox Install/Usage # Install with npm $ npm i -S vue-tiny-pagination # or yarn $

Vue pagination component

vue-ads-pagination Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items. On the right

Vue component for creating Pagination using Tailwind CSS.
Vue component for creating Pagination using Tailwind CSS.

Vue component for creating Pagination using Tailwind CSS.

Low-level Vue pagination component
Low-level Vue pagination component

vue-lpage Low-level Vue pagination component About This is a low-level, ui-agnostic pagination component. You pass it an array of data, the current pa

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

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

George Raphael 3 Jul 9, 2020
Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.

vuejs-uib-pagination Best and complete pagination plugin for Vue.js 2.0. Inspired in Angular Bootstrap Pagination. Not Using Bootstrap? No problem! Th

Santiago Aguilar Hernández 57 Mar 23, 2022
A advanced, smart, highly customizable Vue pagination component for Laravel Pagination

Advanced-Laravel-Vue-Paginate A advanced, smart, highly customizable vue pagination component for Laravel Pagination Demo & Playground See https://shi

MD. Shibbir Ahmed 2 Sep 4, 2022
Sliding Pagination for Vue - ARIA-friendly pagination component with a sliding window

Sliding Pagination for Vue - ARIA-friendly pagination component with a sliding window

Stefan Graupner 12 Nov 21, 2021
A simple Vue.js pagination component. Provide it with the pageCount and the current page and it displays the pagination.

A simple Vue.js pagination component. Provide it with the pageCount and the current page and it displays the pagination.

Martyn Ling 3 Sep 18, 2020
A Vue.js 2 component for simple pagination with Bootstrap layout

vue-bootstrap-paginator A Vue.js 2 component for simple pagination with Bootstrap layout. npm i --save vue-bootstrap-paginator Narrow template Full te

Sobesednik Media 2 Jun 29, 2018
A pagination table for BootstrapVue with AJAX fetch and server side pagination options.

b-pagination-table A pagination table for BootstrapVue with AJAX fetch and server side pagination options. Internally the component uses b-pagination

X.act Systems 1 Jun 7, 2022
A tiny pagination range creator for your pagination UI

pgr A tiny pagination range creator for your pagination UI.

Simon Sinclair 0 Jun 12, 2021
A lightweight and customizeable Bootstrap Pagination for Vue

v-pagy Server-side paging component in vue, template based on bootstrap Vue.js (tested with 2.x) Bootstrap CSS (tested with 4.x) Installation npm inst

Son Tran 14 Sep 10, 2020
A Vue.js pagination component for Laravel thats built for Tailwind

Tailable Pagination A Vue.js pagination component for Laravel thats built for Tailwind. Requirements Vue.js 2.x Laravel 5.x + Tailwindcss 2.x Demo & D

null 9 May 27, 2022