Skip to main content
Vuetify0 is now in alpha!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

createPagination API

API reference for the createPagination composable.

Explore these related pages for additional context and usage patterns.

Functions

createPagination

(_options?: PaginationOptions) => PaginationContext

Creates a pagination instance.

createPaginationContext

(_options?: PaginationContextOptions) => ContextTrinity<PaginationContext>

Creates a pagination context for dependency injection.

usePagination

(namespace?: string) => PaginationContext

Returns the current pagination instance from context.

Options

page

number | ShallowRef<number> | undefined

Initial page or ref for v-model (1-indexed).

Default: 1

itemsPerPage

MaybeRefOrGetter<number> | undefined

Items per page.

Default: 10

size

MaybeRefOrGetter<number> | undefined

Total number of items.

Default: 0

visible

MaybeRefOrGetter<number> | undefined

Maximum visible page buttons.

Default: 5

ellipsis

string | false | undefined

Ellipsis character.

Default: '…'

Properties

page

WritableComputedRef<number, number>

Current page (1-indexed, auto-clamped to total pages)

itemsPerPage

number

Items per page

size

number

Total number of items

pages

number

Total number of pages (computed from size / itemsPerPage)

ellipsis

string | false

Ellipsis character, or false if disabled

items

ComputedRef<PaginationTicket[]>

Visible page numbers and ellipsis for rendering

pageStart

Readonly<Ref<number, number>>

Start index of items on current page (0-indexed)

pageStop

Readonly<Ref<number, number>>

End index of items on current page (exclusive, 0-indexed)

isFirst

Readonly<Ref<boolean, boolean>>

Whether current page is the first page

isLast

Readonly<Ref<boolean, boolean>>

Whether current page is the last page

Methods

first

() => void

Go to first page

last

() => void

Go to last page

next

() => void

Go to next page

prev

() => void

Go to previous page

select

(value: number) => void

Go to specific page

Was this page helpful?

Ctrl+/