Pagination

A simple pagination component

GitHub

Demo

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5
• ...
• 20

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• ...
• 20

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• ...
• 100

Install

npm i @vuesimple/vs-pagination

Usage

<template>
  <vs-pagination :total-pages="20" @change="changePage"></vs-pagination>
</template>

<script>
  import VsPagination from '@vuesimple/vs-pagination';

  export default {
    components: {
      VsPagination,
    },
  };
</script>

CDN

<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-pagination@3.1.6/dist/index.min.js"></script>

// Main/Entry file
app.use(VsPagination.plugin);

<template>
  <vs-pagination :total-pages="20" @change="changePage"></vs-pagination>
</template>

Props

Name	Type	Default	Description
total-pages	Number	-	Total count of pages. required
current-page	Number	1	Sets the current page.
page-padding	Number	1	Sets the number of pages that appear before and after active page between gap indicator.
page-gap	Number	2	Positions the leading and trailing gap indicator, based on the current and total pages.
hide-prev-next	Boolean	false	Hide prev and next button on reaching first or last page.

Events

Name	Description
change	On page change (return page value)

Slots

You can define own arrow icon markup via "#slot-name:

Name	Description
leftIcon	Left Icon slot
rightIcon	Right Icon slot