NavigationPagination

Pagination made of real links (it works without JavaScript and can be crawled), or buttons. The page can live in the URL.

import { NavigationPagination } from '@zairakai/vue-components/Navigation'

Usage

<NavigationPagination />

Example

• …

Page 3

<script setup>
  import { ref } from 'vue'

  const page = ref(3)
</script>

<template>
  <NavigationPagination
    v-model="page"
    :pages="12"
  />
  <p>Page {{ page }}</p>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	number	undefined	The current page, starting at 1.
pages	number		Either the number of pages...
totalItems	number		...or the number of items and the size of a page.
pageSize	number	10
siblings	number	1
boundaries	number	1
queryParam	string		Keep the page in this query parameter of the URL (?page=3). The items become real links.
hrefFor	func		Build the link of a page yourself (a router link, another URL scheme). The items become real links.
label	string	'Pagination'
previousLabel	string	'Previous page'
nextLabel	string	'Next page'
pageLabel	string	'Page'

Events

Name	Description
update:modelValue
change

Slots

Name	Description
previous
next

See Theming for the class hooks and the data-* state of the components.