install the package using npm within your custom tool.
Then I create a vue component with the following code
<template>
<RenderlessPagination
:data="data"
:limit="limit"
:keep-length="keepLength"
@pagination-change-page="onPaginationChangePage"
>
<template #default="slotProps">
<div class="rounded-b-lg">
<nav class="flex justify-between items-center"
v-bind="$attrs"
aria-label="Pagination"
v-if="slotProps.computed.total > slotProps.computed.perPage"
>
<button
:class="{
'text-xs font-bold py-3 px-4 focus:outline-none rounded-bl-lg focus:ring focus:ring-inset text-primary-500 hover:text-primary-400 active:text-primary-600': slotProps.computed.prevPageUrl,
'text-xs font-bold py-3 px-4 focus:outline-none rounded-bl-lg focus:ring focus:ring-inset text-gray-300 dark:text-gray-600': !slotProps.computed.prevPageUrl
}"
:disabled="!slotProps.computed.prevPageUrl"
v-on="slotProps.prevButtonEvents"
>
<slot name="prev-nav">
Previous
</slot>
</button>
<span class="text-xs px-4">
{{ currentPageRange(slotProps.computed) }}
</span>
<button
:class="{
'text-xs font-bold py-3 px-4 focus:outline-none rounded-br-lg focus:ring focus:ring-inset text-primary-500 hover:text-primary-400 active:text-primary-600': slotProps.computed.nextPageUrl,
'text-xs font-bold py-3 px-4 focus:outline-none rounded-bl-lg focus:ring focus:ring-inset text-gray-300 dark:text-gray-600': !slotProps.computed.nextPageUrl
}"
:disabled="!slotProps.computed.nextPageUrl"
v-on="slotProps.nextButtonEvents"
>
<slot name="next-nav">
Next
</slot>
</button>
</nav>
</div>
</template>
</RenderlessPagination>
</template>
<script>
import RenderlessPagination from 'laravel-vue-pagination/src/RenderlessPagination.vue';
export default {
inheritAttrs: false,
emits: ['pagination-change-page'],
components: {
RenderlessPagination,
},
props: {
data: {
type: Object,
default: () => ({}),
},
limit: {
type: Number,
default: 0,
},
keepLength: {
type: Boolean,
default: false,
},
perPage: {
type: Number,
default: 10
},
},
methods: {
onPaginationChangePage(page) {
this.$emit('pagination-change-page', page, this.computedPerPage);
},
currentPageRange(computed) {
const currentPage = computed.currentPage;
const perPage = this.computedPerPage;
const total = computed.total;
if (total === 0) {
return '';
}
const start = (currentPage - 1) * perPage + 1;
const end = Math.min(currentPage * perPage, total);
return `${start}-${end} of ${total}`;
},
},
computed: {
computedPerPage() {
// Use the perPage prop if available, otherwise use a default value
return this.perPage;
},
// ... other computed properties
}
};
</script>```
I then included that in my tool.vue
```import ROPagination from "../components/ROPagination.vue";
<ROPagination :data="items" :limit="currentPageCount" :keep-length="true" @pagination-change-
You will need to update your tool to provide the props e.g. items, limit and currentPageCount. And also update your laravel controller to accept this
