Laravel vue pagination uikit

Vue.js pagination component for Laravel paginators and UIKit

Version: 1.0.6 Updated: 06/25/2017

By: orvice License: MIT

Downloads Last 30 Days: 18

Build Status

Laravel Vue Pagination

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



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


Register the component:

Vue.component('pagination', require('laravel-vue-pagination'));

Use the component:

    <li v-for="post in" v-text="post.title"></li>

<pagination :data="laravelData" v-on:pagination-change-page="getResults"></pagination>
Vue.component('example-component', {

    data() {
        return {
            // Our data object that holds the Laravel paginator data
            laravelData: {},

    created() {
        // Fetch initial results

    methods: {
        // Our method to GET results from a Laravel endpoint
        getResults(page) {
            if (typeof page === 'undefined') {
                page = 1;

            // Using vue-resource as an example
            this.$http.get('example/results?page=' + page)
                .then(response => {
                    return response.json();
                }).then(data => {
                    this.laravelData = data;




Name Type Description
data Object An object containing the structure of a Laravel paginator response. See below for default value.
limit Number (optional) Limit of pages to be rendered. Default 0 (unlimited links) -1 will hide numeric pages and leave only arrow navigation. 3 will show 3 previous and 3 next numeric pages from current page.
    current_page: 1,
    data: [],
    from: 1,
    last_page: 1,
    next_page_url: null,
    per_page: 10,
    prev_page_url: null,
    to: 1,
    total: 0,


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


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

Categories: Vue js