README

Want your logo here? Sponsor me on GitHub

Laravel Vue Pagination

A Vue.js pagination component for Laravel paginators.

Requirements

For Vue 2 support use v2.

Install

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

Demo

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

Usage

import LaravelVuePagination from 'laravel-vue-pagination';

export default {
    components: {
        'Pagination': LaravelVuePagination
    }
}

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" />

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">
    <template #prev-nav>
        <span>&lt; Previous</span>
    </template>
    <template #next-nav>
        <span>Next &gt;</span>
    </template>
</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.

Usage no npm install needed!