[] []

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