Pagination with Vue3 and Daisy UI?

[compilekaiten]

As I new developer, I'm struggling a little bit to get a grasp on how to make this work...

I've followed the example and have my data being returned from my API with a hard 10 per page limit.
I don't need selectable limits. My API returns 10 entries per requested page.

I'm not sure how to go about implementing this using DaisyUI instead of NaiveUI.
DaisyUI doesn't have any components, so I guess I would have to make something custom? I'm not sure.

Has anyone done this before and could give me some pointers?
Is there a Discord or other means of contact to get support?

Thanks

My Current Code:

import axios from 'axios'
import { usePagination } from 'vue-request'
import { computed } from 'vue'

function queryAPI(params: { page?: number; limit?: number }) {
  return axios.get('https://REDACTED/@packages/getAll', { // https://REDACTED/@packages/getAll?page=1&limit=10
    params,
  })
}

const { data, current, totalPage, loading, pageSize } = usePagination(queryAPI, {
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'limit',
    totalKey: 'data.all_packages.rowCount',
  },
})

const packages = computed(() => data.value?.data.all_packages || [])
</script>

<template>
  <!-- <pre>{{ current }}</pre> -->
  <pre :show="loading">Loading Status: {{ loading }}</pre>

  <div class="container mx-auto grid md:grid-cols-3 gap-3">
    <ul v-for="entry in packages" :key="entry.id">
      <div class="alert shadow-2xl border-x-4 border-info h-auto w-screen md:w-full flex flex-row items-center justify-start">
        <div class="avatar">
          <div class="w-16 rounded-full ring ring-info ring-offset-base-100 ring-offset-4">
            <img :src="entry.icon_path" loading="lazy">
          </div>
        </div>
        <div class="flex flex-col justify-start items-start pl-2 text-left grow">
          <span class="font-bold underline underline-offset-4">{{ entry.name }}</span>
          <span class="text-sm text-ellipsis overflow-hidden">{{ entry.control_desc }}</span>
          <span class="text-sm">Section: <span class="font-bold">{{ entry.section }}</span></span>
          <span class="text-sm">Version: <span class="font-bold">{{ entry.version }}</span></span>
        </div>
      </div>
    </ul>
  </div>
</template>

[John60676]

pageSize is 10 by default. if you don't need to change it, just ignore it.

You can refer to the following code:

https://codesandbox.io/s/brave-banzai-v4w73n?file=/src/App.vue

[compilekaiten]

pageSize is 10 by default. if you don't need to change it, just ignore it.

You can refer to the following code:

https://codesandbox.io/s/brave-banzai-v4w73n?file=/src/App.vue

Thanks! This was a great example, and got my pagination working.