Awesome Pagination Library For Vue 3

This is a pagination library that provides a simple way to create lightweight, customizable, SEO-friendly pagination systems in Vue 3 applications.

How to use it:

1. Import and register the pagination library.

import { createApp } from "vue";
import App from "./App.vue";
import VueAwesomePaginate from "vue-awesome-paginate";
// necessary css file
import "vue-awesome-paginate/dist/style.css";
createApp(App).use(VueAwesomePaginate).mount("#app");

2. Add the vue-awesome-paginate component to the template and setup the pagination.

<template>
  <vue-awesome-paginate
    :total-items="100"
    :items-per-page="10"
    :max-pages-shown="5"
    :current-page="1"
    :on-click="onClickHandler"
  />
</template>
const onClickHandler = (page: number) => {
  console.log(page);
};

3. Available props to customize the pagination.

totalItems: {
  type: Number,
  required: true,
},
itemsPerPage: {
  type: Number,
  default: 10,
  validator: (value: number) => {
    if (value <= 0) {
      const message = "itemsPerPage attribute must be greater than 0.";
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
currentPage: {
  type: Number,
  default: 1,
  validator: (value: number) => {
    const message = "currentPage attribute must be greater than 0.";
    if (value <= 0) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
maxPagesShown: {
  type: Number,
  default: 5,
  validator: (value: number) => {
    const message = "maxPagesShown attribute must be greater than 0.";
    if (value <= 0) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
dir: {
  type: String,
  default: "ltr",
  validator: (value: string) => {
    const message = 'dir attribute must be either "ltr" or "rtl".';
    if (value !== "ltr" && value !== "rtl") {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
type: {
  type: String,
  default: "button",
  validator: (value: string) => {
    const validTypess = ["link", "button"];
    const message =
      "type attribute must be one of the following: " +
      validTypess.join(", ");
    if (validTypess.indexOf(value) === -1) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
onClick: {
  type: Function,
  default: () => {},
},
locale: {
  type: String,
  default: "en",
  validator: (value: string) => {
    const validLocales = ["en", "ar", "ir"];
    const message =
      "locale attribute must be one of the following: " +
      validLocales.join(", ");
    if (validLocales.indexOf(value) === -1) {
      console.error(message);
      throw new TypeError(message);
    }
    return true;
  },
},
prevButtonContent: {
  type: String,
  default: "<",
},
nextButtonContent: {
  type: String,
  default: ">",
},
hidePrevNext: {
  type: Boolean,
  default: false,
},
hidePrevNextWhenEnds: {
  type: Boolean,
  default: false,
},
showBreakpointButtons: {
  type: Boolean,
  default: true,
},
disableBreakpointButtons: {
  type: Boolean,
  default: false,
},
startingBreakpointContent: {
  type: String,
  default: "...",
},
endingBreakpointButtonContent: {
  type: String,
  default: "...",
},
showJumpButtons: {
  type: Boolean,
  default: false,
},
linkUrl: {
  type: String,
  default: "#",
},
backwardJumpButtonContent: {
  type: String,
  default: "<<",
},
forwardJumpButtonContent: {
  type: String,
  default: ">>",
},
// Class props
backButtonClass: {
  type: String,
  default: "back-button",
},
nextButtonClass: {
  type: String,
  default: "next-button",
},
// not included in the documentation yet
firstButtonClass: {
  type: String,
  default: "first-button",
},
// not included in the documentation yet
lastButtonClass: {
  type: String,
  default: "last-button",
},
numberButtonsClass: {
  type: String,
  default: "number-buttons",
},
startingBreakpointButtonClass: {
  type: String,
  default: "starting-breakpoint-button",
},
endingBreakPointButtonClass: {
  type: String,
  default: "ending-breakpoint-button",
},
// use this selector above all the other selectors because of css specificity
paginateButtonsClass: {
  type: String,
  default: "paginate-buttons",
},
activePageClass: {
  type: String,
  default: "active-page",
},
paginationContainerClass: {
  type: String,
  default: "pagination-container",
},
disabledBreakPointButtonClass: {
  type: String,
  default: "disabled-breakpoint-button",
},
backwardJumpButtonClass: {
  type: String,
  default: "backward-jump-button",
},
forwardJumpButtonClass: {
  type: String,
  default: "forward-jump-button",
},

Preview:

Awesome Pagination Library For Vue 3

Changelog:

v1.0.5 (09/22/2022)

  • fixed first and last button disappearing bug

v1.0.3 (09/22/2022)

  • update

v1.0.0 (07/23/2022)

  • configured typescript declaration for build time

v0.0.10 (07/14/2022)

  • added classes for disabled buttons

Download Details:

Author: peshanghiwa

Live Demo: https://codesandbox.io/s/vue-awesome-paginate-demo-gcg21i

Download Link: https://github.com/peshanghiwa/vue-awesome-paginate/archive/refs/heads/master.zip

Official Website: https://github.com/peshanghiwa/vue-awesome-paginate

Install & Download:

# NPM
$ npm i vue-awesome-paginate

Add Comment