vue-laravel-the-pagination v0.0.5

[] []

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

Events