Pagination for API using Vue.js

PaginationApi.vue

<script setup>
import Pagination from "laravel-vue-pagination";
defineProps({
  data: {
    type: Object,
    required: true,
  },
  getter: {
    type: Function,
    required: true,
  },
});
</script>

<template>
  <Pagination :data="data" @pagination-change-page="getter">
    <template #prev-nav>
      <span>&laquo; Previous</span>
    </template>
    <template #next-nav>
      <span>Next &raquo;</span>
    </template>
  </Pagination>
</template>

<style>
ul.pagination {
  @apply flex gap-1;
}
ul.pagination li.page-item a.page-link {
  @apply text-sm py-2 px-4 border rounded;
}
ul.pagination li.page-item.active a.page-link {
  @apply bg-primary text-white;
}
</style>