laravel-vue-pagination component is not Showing On my Vue 3 DOM

Question

I am Using Laravel 10 And Vue 3 Composition Api But my Bootstrap5Pagination is not showing inside the DOM .i install the Component using NPM The Command npm i laravel-vue-pagination

basically i am using v-for to loop through the rows and use sorting function to sort through the columns .

But When i try to paginate though the records the pagination component is not showing inside the Vue Page

Image

VUE 3 File

<template>
  <div class="card">
    <div class="row px-3 pt-3">
      <span class="col-lg-4 mb-2">
        <router-link to="/Manage-Vendor">
          <button class="btn btn-primary">
            <fa icon="fa-solid fa-circle-plus" /> Add New
          </button></router-link
        >
      </span>
      <span class="col-lg-8">
        <div class="d-flex justify-content-end mb-2">
          <div class="input-group" style="max-width: 350px">
            <input
              class="form-control"
              type="text"
              v-model="searchData.searchinp"
              placeholder="Search Something.."
              id="example-search-input"
            />
            <a
              href="javascript:;"
              class="py-2 px-3 text-primary search-btn border-primary border rounded-sm"
              style="border-end-end-radius: 7px; border-top-right-radius: 7px"
              @click="vendorSearch()"
            >
              <fa icon="fa-solid fa-magnifying-glass"></fa>
            </a>
          </div>
        </div>
      </span>
    </div>

    <div class="table-responsive p-3">
      <table
        class="table table-bordered border-primary"
        style="border-radius: 2px"
      >
        <thead>
          <tr>
            <th scope="col" class="text-primary fw-bold">Image</th>
            <th
              scope="col"
              class="text-primary fw-bold sortable"
              @click="sortColumn('vendor_org')"
              :class="{
                asc:
                  sortData.column === 'vendor_org' &&
                  sortData.direction === 'asc',
                desc:
                  sortData.column === 'vendor_org' &&
                  sortData.direction === 'desc',
              }"
            >
              Orgnization
            </th>
            <th
              scope="col"
              class="text-primary fw-bold sortable"
              @click="sortColumn('vendor_name')"
              :class="{
                asc:
                  sortData.column === 'vendor_name' &&
                  sortData.direction === 'asc',
                desc:
                  sortData.column === 'vendor_name' &&
                  sortData.direction === 'desc',
              }"
            >
              Vendor Name
            </th>
            <th
              scope="col"
              class="text-primary fw-bold sortable"
              @click="sortColumn('vendor_contact')"
              :class="{
                asc:
                  sortData.column === 'vendor_contact' &&
                  sortData.direction === 'asc',
                desc:
                  sortData.column === 'vendor_contact' &&
                  sortData.direction === 'desc',
              }"
            >
              Contact No
            </th>
            <th
              scope="col"
              class="text-primary fw-bold sortable"
              @click="sortColumn('status')"
            >
              Status
            </th>
            <th scope="col" class="text-primary fw-bold">Action</th>
          </tr>
        </thead>
        <tbody style="max-height: 10px" class="scroll">
          <tr
            v-for="(item, index) in tableData"
            :key="index"
            style="max-width: 200px"
          >
            <td class="responsive-text">
              <img
                :src="item.img_url"
                class="rounded"
                alt=""
                style="max-width: 50px"
              />
            </td>
            <td class="responsive-text">{{ item.vendor_org }}</td>
            <td class="responsive-text">{{ item.vendor_name }}</td>
            <td>{{ item.vendor_contact }}</td>
            <td style="width: 200px">
              <div class="d-flex justify-content-center">
                <select
                  name=""
                  id=""
                  class="form-select form-select-md"
                  style="border: 1px solid #3a57e8"
                >
                  <option value="">Active</option>
                  <option value="">Not active</option>
                </select>
              </div>
            </td>
            <td style="width: 300px">
              <span class="">
                <span class="">
                  <router-link to="/" class="me-2">
                    <button class="btn btn-primary text-white">Edit</button>
                  </router-link></span
                >
                <span
                  ><router-link to="/" class="me-2">
                    <button class="btn btn-success text-whit">View</button>
                  </router-link></span
                >
                <span
                  ><router-link to="/" class="me-2 text-danger">
                    <span class="btn btn-danger text-white"> Delete </span>
                  </router-link></span
                >
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="">
        <Bootstrap5Pagination
          :data="tableData"
          @pagination-change-page="vendorRecords"
        ></Bootstrap5Pagination>
      </div>
      <div>
        <div class="" style="width: 150px">
          <select v-model="sortRec" id="" class="form-select form-select-md">
            <option selected value="">Records</option>
            <option value="10">10</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="all">All</option>
          </select>
        </div>
      </div>

      <Loader :show="apicall.loading"></Loader>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { API_URL } from "../../../config/path.js";
import api from "../../../lib/api.js";
import "vue3-toastify/dist/index.css";
import Loader from "../../../components/UI/Loader.vue";
import { Bootstrap5Pagination } from "laravel-vue-pagination";

const tableData = ref([]);
const sortRec = ref("");
const apicall = reactive({
  loading: false,
});

const sortData = reactive({
  column: null,
  direction: "asc",
});

const sortColumn = async (columnName) => {
  apicall.loading = true;
  if (sortData.column === columnName) {
    sortData.direction = sortData.direction === "asc" ? "desc" : "asc";
  } else {
    sortData.direction = "asc";
  }
  sortData.column = columnName;
  const response = await api("POST", `${API_URL}Vendor/Sort`, sortData);
  tableData.value = response.data.data;
  if (response.data.status === 200) {
    apicall.loading = false;
  } else {
    apicall.loading = true;
  }
};

const searchData = reactive({
  searchinp: null,
});
const vendorSearch = async () => {
  apicall.loading = true;

  const response = await api("POST", `${API_URL}Vendor/Search`, searchData);
  tableData.value = response.data.data;
  if (response.status === 200) {
    apicall.loading = false;
  } else {
    apicall.loading = true;
  }
};

const vendorRecords = async (page = 1) => {
  apicall.loading = true;
  const response = await api("GET", `${API_URL}vendor/records?page=${page}`);
  tableData.value = response.data.data.data;
  if (response.status === 200) {
    apicall.loading = false;
  } else {
    apicall.loading = false;
  }
};

onMounted(vendorRecords);
</script>

<style scoped>
th.sortable {
  position: relative;
  cursor: pointer;
}

th.sortable::after {
  font-family: "Font Awesome 5 Free";
  /* Use the Font Awesome font family */
  font-weight: 900;
  /* Set the font weight for solid icons */
  content: "\f0dc";
  position: absolute;
  right: 8px;
  color: #5266ec;
}

th.sortable.asc::after {
  content: "\f0d8";
  /* Upward pointing arrow for ascending order */
}

th.sortable.desc::after {
  content: "\f0d7";
  /* Downward pointing arrow for descending order */
}

th.sortable:hover::after {
  color: #5266ec;
}

.responsive-text {
  white-space: nowrap;
  /* Prevent text from wrapping to the next line */
  overflow: hidden;
  /* Hide overflowing content */
  text-overflow: ellipsis;
  /* Display an ellipsis for overflowed text */
  max-width: 150px;
}

.scroll {
  max-height: 200px;
  overflow-y: auto;
}

.action-column {
  position: relative;
  /* Set position to relative */
}

.icon-hv {
  font-size: 20px;
  transition: font-size 0.3s ease;
  /* Smooth transition animation */

  transform: translate(-50%, -50%);
  /* Center the icon */
}

.icon-hv:hover {
  font-size: 25px;
}
</style>

Laravel File

public function vendorRecord()
    {
        try {
            $manageVendor = new ManageVendor;
    
            $data = $manageVendor->paginate(10); 
    
            // Transform each item in the collection
            $data->getCollection()->transform(function ($item) {
                // Assuming $item->vendor_img contains the relative path to the image
                $item->img_url = asset($item->vendor_img);
                return $item;
            });
    
            return response()->json([
                'data' => $data->toArray(), // Return paginated data as array
                'message' => 'Vendor List'
            ]);
        } catch (\Exception $e) {
            return response()->json([
                'error' => 'Error occurred while fetching vendor records.',
                'message' => $e->getMessage()
            ], 500);
        }
    }