Want your logo here? Sponsor me on GitHub

Laravel Vue Pagination

A Vue.js pagination component for Laravel paginators.

Requirements

• Vue.js 3
• Laravel 5+
• Bootstrap 4

For Vue 2 support use v2.

Install

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

Usage

Register the component:

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:

• Star this repository
• Tell others about this project
• Sponsor me on GitHub

Credits

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