Appearance

Paginate ​

Paginate is a component that displays the number of pages and allows the user to navigate between them

Basic Usage ​

The Paginate component accepts the currentPage, listLength and pageSize properties, and emits a set-page event when another page is selected.

Numbered page buttons are rendered between the previous and next buttons with the standard (default) variant.

Current page is 1

vue
<Paginate :current-page="currentPage" :list-length="100" :page-size="10" @set-page="currentPage = $event" />

Stats variant ​

Page stats are rendered between the previous and next buttons instead of numbered page buttons. This is primarily used for displaying n of many when handling an indeterminate or exceptionally large number of results. Uses the usePageStats composable under-the-hood.

    1 - 10 of many
vue
<Paginate :current-page="currentPage" :list-length="100" :page-size="10" @set-page="currentPage = $event" variant="stats" />

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.