Simple pagination with Laravel format

How-to.txt

1. Import or use component above like this `<SimplePagination :pagination="paginationData" :callback="getApplications" />`
2. paginationData is the whole data coming from the laravel endpoint with has the pagination and data in it
3. getApplications is the method that fetch the applications on first load and keeps fetching the values.

paginationComponent.vue

<template>
  <div style="display:inline-block">
    <ul class="pagination pagination-danger" v-if="pagination">
      <li
        class="page-item"
        :class="[pagination.prev_page_url != null ? active : 'disabled']"
      >
        <a href="javascript:void(0);" class="page-link" @click="fetchPrevious">prev</a>
      </li>

      <li
        class="page-item"
        :class="[pagination.next_page_url != null ? active : 'disabled']"
      >
        <a href="javascript:void(0);" class="page-link" @click="fetchNext">next</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "SimplePagination",
  data() {
    return {};
  },
  props: ["pagination", "callback"],
  methods: {
    fetchNext() {
      if (this.pagination.next_page_url != null) {
        let url = new URL(this.pagination.next_page_url);
        let params = new URLSearchParams(url.search);
        this.callback(params.get("page"));
      }
    },
    fetchPrevious() {
      if (this.pagination.prev_page_url != null) {
        let url = new URL(this.pagination.prev_page_url);
        let params = new URLSearchParams(url.search);
        this.callback(params.get("page"));
      }
    }
  },
  created() {}
};
</script>
<style scoped>
.page-item.active .page-link {
  z-index: 0;
}
</style>