Laravel-vue-pagination-theme NPM

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

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`