@hennge/vue3-pagination
TypeScript icon, indicating that this package has built-in type declarations

1.0.17 • Public • Published

Vue 3 Pagination

A Vue 3 component for pagination.

Table of Contents

Demo

Demo

Installation

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

// with npm
npm install @hennge/vue3-pagination
// with yarn
yarn add @hennge/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 "@hennge/vue3-pagination";
import "@hennge/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

Events

ID Output Description
update:modelValue Number The current page has been updated

License

MIT

Copyright © 2020 - Present, Julian Springaux

Contact

Package Sidebar

Install

npm i @hennge/vue3-pagination

Weekly Downloads

2,268

Version

1.0.17

License

MIT

Unpacked Size

39.4 kB

Total Files

15

Last publish

Collaborators

  • julian-springaux
  • taizo
  • hennge-henrylie