VueJS pagination component to paginate anything in Laravel, checkout the tutorial on http://wp.me/p8cmxL-b7 by www.qcode.in

SimplePagination.vue

<template>
  <div :class="{'loading': loading}" class="pager-data-wrapper">

      <!-- Pagination Slot -->
      <slot :result="getResult()">
          <div class="text-center alert-info pb-3">
            <span v-if="!loading">
                {{ result.length }} items found. render it using v-for="item in result"
            </span>
            <span v-if="loading">
                Loading...
            </span>
        </div>
      </slot>

      <!-- Pagination links -->
      <div class="pager-link text-center">
          <div v-if="pagerType == 'paged'">
              <a 
                v-show="result.length"
                :disabled="!prevPageUrl || loading" 
                :href="prevPageUrl" 
                @click.prevent="prevPage" 
                :class="{loading: loading}"
                class="btn btn-primary">Prev</a>
              
              <a 
                :disabled="!nextPageUrl || loading" 
                :href="nextPageUrl" 
                @click.prevent="nextPage" 
                :class="{loading: loading}"                
                class="btn btn-primary">Next</a>
          </div>
          
          <button
            v-if="pagerType == 'single'"
            @click.prevent="nextPage"
            class="btn btn-block btn-primary"
            :class="{loading: loading}"
            :disabled="loading || !nextPageUrl">
                {{ loading ? 'Loading...' : moreBtnText }}
          </button>
      </div>
  </div>
</template>

<script>
export default {
  props: {
    url: {
        required: true
    },
    moreBtnText: {
        type: String,
        default: 'Load More...'
    },
    chunked: {
        type: Number,
        default: 0
    },
    prepend: {
        default: null
    },
    apepend: {
        default: null
    },
    pagerType: {
        default: 'single'
    }
  },
  data() {
      return {
        result: [],
        loading: true,          
        nextPageUrl: null,
        prevPageUrl: null,
        prependData: null,
        appendData: null
      }
  },
  created() {
      // load the data initially 
      this.fetchData();
  },
  methods: {
        fetchData(url) {
            let vm = this;
            let endpoint = url ? url : this.url;

            // show loader
            vm.loading = true;

            // fetch the data from passed url property
            axios.get(endpoint).then((res) => {
                // hide the loader
                vm.loading = false;

                // Assign returend data
                if( url && vm.pagerType == 'single' ) {
                    // push next page into result
                    _.forEach(res.data.data, (item) => vm.result.push(item))
                } else {
                    // add first page
                    vm.result = res.data.data;
                }
                
                // assigne next and prev page url
                vm.nextPageUrl = res.data.next_page_url;
                vm.prevPageUrl = res.data.prev_page_url;
            }).catch((err) => {
                vm.loading = false;
            })
        },

        getResult() {
            return (this.chunked > 0) ? _.chunk(this.result, this.chunked) : this.result;
        },

        prevPage() {
            this.fetchData(this.prevPageUrl)
        },

        nextPage() {
            this.fetchData(this.nextPageUrl)
        }

    },

    watch: {
        prepend(newVal) {
            if( newVal ) {
                this.prependData = newVal;
                this.result.unshift(newVal);
            }

            this.prependData = null
        },

        append(newVal) {
            if( newVal ) {
                this.appendData = newVal;
                this.result.push(newVal);
            }

            this.appendData = null
        }
    }
}
</script>

<style>
    @-webkit-keyframes spinAround {
        from {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(359deg);
                    transform: rotate(359deg);
        }
    }
    @keyframes spinAround {
        from {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(359deg);
                    transform: rotate(359deg);
        }
    }

    .btn.loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
    }

    .btn.loading:after {
    -webkit-animation: spinAround 500ms infinite linear;
            animation: spinAround 500ms infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 290486px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
    position: absolute;
    left: calc(50% - (1em / 2));
    top: calc(50% - (1em / 2));
    position: absolute !important;
    border-color: transparent transparent #fff #fff !important;
    }

    .pb-3 {
        margin-bottom: 3rem
    }

    .alert-info {
        padding: 1rem
    }
</style>