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://unpkg.com/@vuesimple/vs-pagination@<version>/dist/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

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

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

Nuxt.js

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-pagination.js

  import Vue from 'vue';
  import VsPagination from '@vuesimple/vs-pagination';
  
  Vue.component('vs-pagination', VsPagination);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-pagination', mode: 'client' }
      ...
    ]
  }

• In the page/ component

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

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag if you are facing ssr issues.
• You can also do import VsPagination from '@vuesimple/vs-pagination' & add in component:{VsPagination} and use it within component, without globally installing in plugin folder.

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