@aksestani/vue3-pagination NPM

Vue 3 Pagination

A Vue 3 component for pagination.

Demo

Installation

Package is available on NPM: https://www.npmjs.com/package/vue3-pagination

// with npm
npm install @aksestani/vue3-pagination

// with yarn
yarn add @aksestani/vue3-pagination

The component is packaged mainly for use with bundlers, if you require a browser build - post an issue.

Getting Started

Import component

import VPagination from "@aksestani/vue3-pagination";
import "@aksestani/vue3-pagination/dist/vue3-pagination.css";

export default {
  ...
  components: {
    VPagination
  }
  ...
}

How to use

<template>
  <v-pagination
    v-model="page"
    :pages="10"
    :range-size="1"
    active-color="#DCEDFF"
    @update:modelValue="updateHandler"
  />
</template>

Props and attributes

Main interaction with the pagination is done via v-model with Number as expected type of the value passed.

ID	Type	Default	Description
`pages`	`Number`		Total number of pages
`rangeSize`	`Number`	1	Number of page around the current page
`activeColor`	`String`	#DCEDFF	Background color of the current page
`hideFirstButton`	`Boolean`	false	Hide the button to go to the first page
`hideLastButton`	`Boolean`	false	Hide the button to go to the last page