@hennge/vue3-pagination

A Vue 3 component for pagination.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@hennge/vue3-pagination
4371.0.173 years ago3 years agoMinified + gzip package size for @hennge/vue3-pagination in KB

Popular Searches

Readme

Vue 3 Pagination
A Vue 3 component for pagination.

Table of Contents

Import Component How to use

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