Laravel Vue Bulma Pagination

Vue.js pagination component for Laravel pagination with Bulma.

Requirements

• Vue.js
• Laravel
• Bulma

Install

npm install laravel-vue-bulma-pagination

Usage

Controller method:

$tagsData = Tag::paginate(10);
return response()->json([
    'success' => true,
    'tagsData' => $tagsData
]);

Register the component:

import pagination from 'laravel-vue-bulma-pagination';
 
export default {
    components: {
        pagination
    }
}

or globaly

Vue.component('pagination', require('laravel-vue-bulma-pagination'));

Use the component:

<pagination v-bind:pagedata="tagsData" v-on:page-clicked="getTagsList"></pagination>
 
<table>
    <tr v-for="tag in tags">
        <td>{{ tag.id }}</td>
        <td>{{ tag.name }}</td>
    </tr>
</table>

export default {
    data: () => ({
        tags: [],
        tagsData: {}
    }),
    methods: {
        getTagsList(page){
            var vm = this;
            if(page == undefined){
                var pageUrl = '/admin/posts/tags/list';
            }else{
                var pageUrl = '/admin/posts/tags/list?page=' + page;
            }
            
            axios.get(pageUrl).then(function(response){
                if(response.data.hasOwnProperty('success')){
                    vm.tagsData = response.data.tagsData;
                    vm.tags = response.data.tagsData.data;
                }
            }).catch(function(error){
                console.log(error);
            });
        }
    }
}

Props

Name	Type	Description
pagedata	Object	An object contains the value of a Laravel pagination response.

Events

Name	Description
page-clicked	Triggered when a user changes page. Passes the new page number as a parameter.

Credits

I got inspired by seeing this repository laravel-vue-pagination.

Released under the MIT license.

Screenshot