Easy Anything Pagination Component For Vue

A simple yet customizable pagination component that works with any HTML content like DIVs, lists, tables, etc.

How to use it:

1. Import and register the pagination component.

import PaginationComponent from "@xmehdi01/vue-pagination-component";

export default {
  components: {
    PaginationComponent,
  },
};

2. In your template:

<template>
  <div>
    <pagination-component
      :items="items"
      :per-page="perPage"
      @page-changed="currentPage = $event"
    />
  </div>
</template>

export default {
  name: "App",
  components: {
    PaginationComponent,
  },
  data() {
    return {
      // Your data array goes here
      items: [],
      perPage: 3,
      currentPage: 1,
    };
  },
};

3. All available component props.

items: {
  type: Array,
  required: true,
},
perPage: {
  type: Number,
  default: 10,
},
prevLabel: {
  type: String,
  default: "Prev",
},
nextLabel: {
  type: String,
  default: "Next",
},
prevClass: {
  type: String,
  default: "",
},
nextClass: {
  type: String,
  default: "",
},
activeClass: {
  type: String,
  default: "active",
},

Preview:

Download Details:

Author: xmehdi01

Live Demo: https://xmehdi01.github.io/vue-pagination-component

Download Link: https://github.com/xmehdi01/vue-pagination-component/archive/refs/heads/main.zip

Official Website: https://github.com/xmehdi01/vue-pagination-component

Install & Download:

# NPM
$ npm i @xmehdi01/vue-pagination-component