Vue 3 Pagination

A Vue 3 component for pagination.

Table of Contents

• Demo
• Installation
• Getting Started
  • Import Component
  • How to use
• License
• Contact

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

• Send me an email
• Contact me through my website