Registry / web-framework / vue-awesome-paginate

vue-awesome-paginate

library1.2.0jsnpmunverified

Vue Awesome Paginate is a modern, lightweight, and highly customizable Vue.js 3 pagination library. It provides various pagination component types, supports full CSS customization, RTL, SEO-friendliness, and different localizations. Built with TypeScript and Vite, it offers full support for Vue.js 3.x and Nuxt.js 3.x applications. The current stable version is 1.2.0. The library aims for flexibility and ease of use, with all pagination functionalities built-in and zero external dependencies, making it a self-contained solution for adding pagination to web applications. It's suitable for projects requiring fine-grained control over pagination appearance and behavior without heavy external packages.

web-framework

npm install vue-awesome-paginate

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-AWESOME-PAGINA

vue-awesome-paginate

web-frameworkjavascriptv1.2.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueAwesomePaginate

✓ import VueAwesomePaginate from 'vue-awesome-paginate'

✗ const VueAwesomePaginate = require('vue-awesome-paginate')

Used for global registration in Vue/Nuxt applications. Direct component import is not typically shown in documentation, rather global plugin usage.

CSS Styles

✓ import 'vue-awesome-paginate/dist/style.css'

✗ import 'vue-awesome-paginate/style.css'

The necessary CSS styles must be explicitly imported for the component to render correctly. Ensure the '/dist' path is included.

VueAwesomePaginate Component

✓ <vue-awesome-paginate ... />

After global registration via `app.use(VueAwesomePaginate)`, the component is available globally as `<vue-awesome-paginate>`.

This quickstart demonstrates how to globally register Vue Awesome Paginate and integrate its component into a Vue 3 application, including basic usage with total items, items per page, current page binding, and a click handler. It also includes an example of custom CSS styling.

import { createApp, ref } from 'vue'; import App from './App.vue'; import VueAwesomePaginate from 'vue-awesome-paginate'; import 'vue-awesome-paginate/dist/style.css'; const app = createApp(App); app.use(VueAwesomePaginate).mount('#app'); // In App.vue or another component: // <script setup lang="ts"> // import { ref } from 'vue'; // const onClickHandler = (page: number) => { // console.log('Page clicked:', page); // }; // const currentPage = ref(1); // </script> // <template> // <vue-awesome-paginate // :total-items="100" // :items-per-page="10" // :max-pages-shown="7" // v-model="currentPage" // @click="onClickHandler" // class-name="my-custom-pagination" // /> // <p>Current Page: {{ currentPage }}</p> // </template> // <style> // .my-custom-pagination { // display: flex; // column-gap: 8px; // margin-top: 20px; // } // .my-custom-pagination .paginate-buttons { // height: 36px; // width: 36px; // border-radius: 18px; // cursor: pointer; // background-color: #f0f0f0; // border: 1px solid #ccc; // color: #333; // display: flex; // align-items: center; // justify-content: center; // font-weight: 500; // } // .my-custom-pagination .paginate-buttons:hover { // background-color: #e0e0e0; // } // .my-custom-pagination .active-page { // background-color: #007bff; // border-color: #007bff; // color: white; // } // </style>

Debug

Known issues

gotchaThe package requires explicit import of its CSS file for proper styling. Forgetting this step will result in an unstyled pagination component.

fix

Ensure `import 'vue-awesome-paginate/dist/style.css';` is included in your main application entry point (e.g., `main.js` for Vue, `plugins/vue-awesome-paginate.js` for Nuxt).

affects: >=1.0.0

breakingVue Awesome Paginate is designed exclusively for Vue.js 3.x and Nuxt.js 3.x. It is not compatible with earlier versions of Vue (e.g., Vue 2).

fix

Ensure your project is running Vue.js 3.x or Nuxt.js 3.x. For Vue 2 projects, you will need to find an alternative pagination library.

affects: >=1.0.0

gotchaWhen using `v-model` for `currentPage`, ensure it's a `ref` or `reactive` property for reactivity in Vue 3. The `@click` event provides the new page number, which can be used to update other data or trigger an API call.

fix

Declare `currentPage` using `const currentPage = ref(1);` in your `<script setup>` or `data` option. The `@click` handler should also be defined correctly as a function that accepts the page number.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: vue-awesome-paginate

The `vue-awesome-paginate` plugin was not correctly registered with the Vue application.

fix

In your `main.js` (Vue) or Nuxt plugin file, ensure you have `createApp(App).use(VueAwesomePaginate).mount('#app');` (for Vue) or `nuxtApp.vueApp.use(VueAwesomePaginate);` (for Nuxt).

Element 'vue-awesome-paginate' is not known.

This IDE or TypeScript error indicates that the component is not recognized. This often happens if the component is used before it's globally registered, or if TypeScript can't infer its global availability.

fix

Verify correct global registration. For TypeScript, ensure your `shims-vue.d.ts` or similar declaration file includes types for globally registered components, or import the component directly if using a module-level import pattern (though global registration is standard for this library).

Upgrade

Version history

1.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/peshanghiwa/vue-awesome-paginate ↗

packagehttps://www.npmjs.com/package/vue-awesome-paginate ↗

homepagehttps://vue-awesome-paginate.vercel.app ↗