vue-laravel-the-pagination

[] []

Laravel VueJs ThePagination

A Vue.js pagination simple component for Laravel paginators.

Requirements

• Vue.js 2.x
• Laravel 5.x

Simple example

Install

npm install vue-laravel-the-pagination

Usage

Register the component:

import Vue from 'vue'
import ThePagination from 'vue-laravel-the-pagination';

Vue.use(ThePagination, { // Default config (optional)
    nameComponent: 'ThePagination', // Change name component default: (ThePagination or the-pagination)
    baseURL: 'http://127.0.0.1:8000/api', // Base URL to request
    config: {
        headers: { 
            'Authorization': 'Bearer ...',
            'Accept': 'application/json'
        }
    }
})

Use the component:

<the-pagination 
    url="paginate"
    :query="query" 
    :config="paginateConfig"
    @loading="res => loader = res"
    @getData="res => list = res"
/>

export default {
    data: () => ({
        loader: false,
        list: [],
        query: {
            per_page: 5,
            termToSearch: '',
            status: 0,
            // ADD HERE ALL PARAMS TO GET REQUEST
            // QUERY IS WATCHED, WHEN CHANGE, WILL MAKE NEW REQUEST
        },
        paginateConfig: {
            headers: { 
                'OVERWRITE': 'THIS OVERWRITE DEFAULT CONFIG',
            }
        }
    })
}

Customizing Prev/Next Buttons

Prev/Next buttons can be customized using the first-page, prev-page, next-page and last-page slots:

<the-pagination>
    <span slot="first-page || prev-page || next-page || last-page"> Label </span>
<the-pagination>

Example in Laravel

API

Props

Name	Type	Description
url	String	(required) Endpoint for make request
query	Object	(optinal) Watched Object to be params request
intervalMaxNumbers	Number	(default: 5) Qty numbers to show in pagination (can be unpaired)
config	Object	Object to config component

Events

Name	Return	Description
loading	Boolean	Return status request
getData	Array	Return data with list request