Vue Simple Pagination

🗃 A simple vue pagination.

A light weight vue plugin built with accessibility in mind.

📺 Live Demo

Code Sandbox: Link

🛠 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/vs-pagination.min.js"></script>

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

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

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 slots:

| Name | Description | | --------- | --------------- | | leftIcon | Left Icon slot | | rightIcon | Right Icon slot |