Pagination

Paginates a list by offset/limit, emitting load events when the user navigates pages.

npm install @vuecs/pagination

Basic usage

Vue

<script setup lang="ts">
import { VCPagination } from '@vuecs/pagination';
import { ref } from 'vue';

const meta = ref({ total: 100, offset: 0, limit: 10 });

const load = (next) => {
    meta.value.offset = next.offset;
    // refetch your data with the new offset
};
</script>

<template>
    <VCPagination
        :total="meta.total"
        :offset="meta.offset"
        :limit="meta.limit"
        @load="load"
    />
</template>

CSS

@import "tailwindcss";
@import "@vuecs/design";

/* Active-page + ellipsis structural CSS. */
@import "@vuecs/pagination";

@custom-variant dark (&:where(.dark, .dark *));

Props

Prop	Type	Default	Description
total	number	0	Total number of items
offset	number	0	Current offset
limit	number	0	Items per page (must be > 0 for the component to render any pages)
busy	boolean	false	Disable controls during loading
tag	string	'ul'	Root element tag
itemTag	string	'li'	Item wrapper tag

Events

Event	Payload	Description
load	{ page, offset, limit, total } (PaginationMeta)	Emitted when the user navigates pages. Note: the emitted total is the total page count (Math.ceil(items / limit)), not the input total items.

See also

• Theme System