vue-laravel-paginex

    2.0.3 • Public • Published

    Laravel Pagination with VueJS (customizable)

    vue-laravel-paginex will provide you ability to easily create pagination from Laravel Pagination object.

    Installation

    npm i vue-laravel-paginex

    or

    yarn add vue-laravel-paginex

    Usage

    First import the Pagination component inside your Vue component.

    import Pagination from 'vue-laravel-paginex'

    and define it

    Vue.component('Pagination', Pagination)

    Then you'll be able to use pagination component.

    Example:

    <Pagination :changePage="getData" :data="data"/>

    :changePage prop will run the function ( in our case is getData()) when new page selected.

    getData() function example with vue-resource.
    methods: {
        get(page) {
            this.$http.get('getDataEndpoint?page=' + page).then(response => {
                this.data = response.data
            })
        }
    }

    this.data object must be Laravel default or API Resource Pagination object.

    Example:
    {
        current_page: 1
        data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of Africa", type: "Licensed",},]
        first_page_url: "http://example.com/getDataEndpoint?page=1"
        from: 1
        last_page: 10
        last_page_url: "http://example.com/getDataEndpoint?page=10"
        next_page_url: "http://example.com/getDataEndpoint?page=2"
        path: "http://example.com/getDataEndpoint"
        per_page: 20
        prev_page_url: null
        to: 20
        total: 200
    }

    or

    {
        data: [
            {
                id: 1,
                name: "Eladio Schroeder Sr.",
                email: "therese28@example.com",
            },
            {
                id: 2,
                name: "Liliana Mayert",
                email: "evandervort@example.com",
            }
        ],
        links:{
            first: "http://example.com/pagination?page=1",
            last: "http://example.com/pagination?page=1",
            prev: null,
            next: null
        },
        meta:{
            current_page: 1,
            from: 1,
            last_page: 1,
            path: "http://example.com/pagination",
            per_page: 15,
            to: 10,
            total: 10
        }
    }

    Customizations

    You can customize your pagination styles by overwriting default values. Available props for component:

    Prop Name Default Value
    containerClass pagination
    buttonIcons false
    prevButtonClass page-item
    prevButtonText Prev
    prevButtonIcon fa fa-chevron-left
    nextButtonClass page-item
    nextButtonText Next
    nextButtonIcon fa fa-chevron-right
    numberButtonClass page-item
    numberClass page-link
    numbersCountForShow 2
    activeClass active
    Example:

    <Pagination :changePage="getData" :data="data" :containerClass="pagination-container"/>

    You can use :options prop by passing options object into it.

    Example:

    You have to define here only props which you want to overwrite.

    options:{
        containerClass: "pagination-container",
        prevButtonClass: "prev-button-class",
        nextButtonText: "Next Page"
        ...
    }

    <Pagination :changePage="getData" :data="data" :options="options"/>

    Credits

    Install

    npm i vue-laravel-paginex

    DownloadsWeekly Downloads

    8

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    3

    Last publish

    Collaborators

    • vaawebdev
    • gharutyunyan
    • karakhanyans