AppPagination

WLTH standard pagination control. Dot indicators by default — the active dot marks the current page. Enable numbered mode for large datasets where users need to jump to a specific page.

Size

Pages

6

Page 1 of 6

<AppPagination
  v-model:page="page"
  :total="6"
/>

Props

PropTypeDefaultDescription
page / v-model:pagenumber1The current page number. Use v-model:page for two-way binding.
totalnumber—Required. Total number of pages.
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Controls dot/number size and spacing.
show-numbersbooleanfalseSwitches from dot indicators to numbered buttons. Use when users need to jump to a specific page.
loadingbooleanfalseDims the control and disables interaction while page data is loading.

Events

EventPayloadDescription
update:pagenumberEmitted when the user navigates to a different page. Also emitted when dots are clicked directly.

Dots vs numbers

Dots (default)Use when the total page count is small (2–8) and the user navigates sequentially — charts, image galleries, card carousels.
Numbers (show-numbers)Use when the page count is large or users need to jump to a specific page — data tables, search results, long lists.

Using with a table

The most common use case is paginating a UTable. Slice your data client-side, or pass the page number to your API call.

const PAGE_SIZE = 10
const page = ref(1)
const allRows = ref([/* ... your data */])

const totalPages = computed(() => Math.ceil(allRows.value.length / PAGE_SIZE))
const pageRows   = computed(() =>
  allRows.value.slice((page.value - 1) * PAGE_SIZE, page.value * PAGE_SIZE)
)
<UTable :rows="pageRows" :columns="columns" />
<AppPagination v-model:page="page" :total="totalPages" show-numbers />

For server-side pagination, watch page and re-fetch on change:

watch(page, async (newPage) => {
  rows.value = await $fetch('/api/clients', { query: { page: newPage, limit: PAGE_SIZE } })
})