Laravel vue bulma paginator

Vue.js pagination component for Laravel paginators and Bootstrap styles

Version: 1.0.0 Updated: 07/24/2018

By: georgie817 License: MIT

Downloads Last 30 Days: 23

Build Status npm Downloads

Laravel Vue Bulma Pagination

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

Requirements

Install

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

Usage

Register the component:

Vue.component('pagination', require('laravel-vue-bulma-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. See below for default value.
limit Number (optional) Limit of pages to be rendered. Default 0 (unlimited pages) -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 (see below for example output).

Default data

{
    current_page: 1,
    data: [],
    from: 1,
    last_page: 1,
    next_page_url: null,
    per_page: 10,
    prev_page_url: null,
    to: 1,
    total: 0,
}

Example limit

pagination

Events

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

Credits

Laravel Vue Bulma Pagination was created by Gilbert Pellegrom from Dev7studios as Laravel Vue Pagination with support for Bootstrap. And Forked by George Raphael to provide support for Bulma. Released under the MIT license.

Categories: Vue js