vue-vpaginator

Vue.js 2 + Bootstrap paginator component for Laravel Pagination response data.

Install

npm install vue-vpaginator --save-dev

Prerequisites

• Vue.js 2
• jQuery
• jQuery BootPag
• Some Laravel Pagination result

Usage

In your custom component:

my-custom-component.vue

<template>
    <table class="table">
      ...
    </table>

    <vpagination :response="myResponseData" @paginate="fetchMyServerData"></vpagination>
</template>

<script>
  export default {
    data () {
      return {
        myResponseData: {}
      }
    },

    mounted () {
      this.fetchMyServerData()
    },

    methods: {
      /**
       * Fetch my data from server
       */
      fetchMyServerData (page = 1) {
        // Fetching some data from server...
        axios.get(`/api/v1/product/?page=${page}`)
          .then(response => response.data)
          .then(response => {
            // Setting the response data (Laravel Pagination data)
            this.myResponseData = response
            // ...
          })
      }
    }
  }
</script>

In your entry app:

const Vue = require('vue')

// jQuery
window.$ = window.jQuery = require('jquery')

// jQuery BootPag
// require using a path because it has not some main entry file
require('bootpag/lib/jquery.bootpag')

// require vpaginator
Vue.component('vpaginator', require('vue-vpaginator'))

// require your custom component
Vue.component('my-custom-component', require('./components/my-custom-component'))

const app = new Vue({
  el: '#app'
})

Make sure that your Laravel app returns a Pagination data.

Attributes

response

The response data name for store the Laravel Pagination data. E.g. v-bind:response="myResponseData" or :response="myResponseData".

Events

@paginate (page)

It fires when some page number is clicked. You need to pass a callback (method: ...).

License

MIT license

© 2017 José Luis Quintana