Registry / web-framework / vue-ads-pagination

vue-ads-pagination

library2.1.7jsnpmunverified

vue-ads-pagination is a Vue.js component designed to provide comprehensive pagination functionality for displaying large lists of items efficiently. It allows users to navigate through pages, showing information about the current item range (e.g., 'Items 1 to 10 of 100') and offering buttons for first, last, next, previous, and specific page selection. The current stable version, 2.1.7, is focused on Vue 2 compatibility. This package distinguishes itself by offering extensive customizability through slots, allowing developers to completely override default components (like the page buttons or item range display) with their own Vue components or apply custom styles to the default elements, making it highly adaptable to various UI designs. It provides distinct events for `page-change` and `range-change` to manage state updates effectively in the parent component. There's no explicit release cadence mentioned, but it acts as a mature, single-purpose component.

web-framework

npm install vue-ads-pagination

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-ADS-PAGINATION

vue-ads-pagination

web-frameworkjavascriptv2.1.7

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.

VueAdsPagination

✓ import VueAdsPagination from 'vue-ads-pagination';

✗ const VueAdsPagination = require('vue-ads-pagination');

This is the default export of the main pagination component. While CommonJS `require` might work in some setups, ESM `import` is the standard for modern Vue projects.

VueAdsPageButton

✓ import { VueAdsPageButton } from 'vue-ads-pagination';

✗ import VueAdsPageButton from 'vue-ads-pagination/VueAdsPageButton';

This is a named export for the individual page button component. It's useful if you want to reuse or customize the default button logic independently.

CSS

✓ import 'vue-ads-pagination/dist/vue-ads-pagination.css';

✗ import 'vue-ads-pagination/src/vue-ads-pagination.css';

The default styles for the pagination component are not automatically injected and must be imported separately in your main application file or a root component to apply styling.

This example demonstrates how to integrate `VueAdsPagination` and `VueAdsPageButton` into a Vue component. It shows binding properties like `total-items`, `page`, and handling `page-change` and `range-change` events. The example also illustrates how to customize the display of item range information and individual pagination buttons using scoped slots.

<template> <div id="app"> <vue-ads-pagination :total-items="200" :max-visible-pages="5" :page="currentPage" :loading="loading" @page-change="pageChange" @range-change="rangeChange" > <template slot-scope="props"> <div class="vue-ads-pr-2 vue-ads-leading-loose"> Items {{ props.start }} to {{ props.end }} of {{ props.total }} </div> </template> <template slot="buttons" slot-scope="props" > <vue-ads-page-button v-for="(button, key) in props.buttons" :key="key" v-bind="button" @page-change="currentPage = button.page" /> </template> </vue-ads-pagination> <p>Current Page: {{ currentPage + 1 }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; import '../node_modules/@fortawesome/fontawesome-free/css/all.css'; // For default button icons import 'vue-ads-pagination/dist/vue-ads-pagination.css'; // For default styling import VueAdsPagination, { VueAdsPageButton } from 'vue-ads-pagination'; export default Vue.extend({ name: 'App', components: { VueAdsPagination, VueAdsPageButton, }, data () { return { loading: false, currentPage: 4, // 0-based, so 5th page }; }, methods: { pageChange (page: number) { this.currentPage = page; // Update the bound prop console.log('Page changed to:', page + 1); }, rangeChange (start: number, end: number) { console.log('Displaying items from', start + 1, 'to', end + 1); }, }, }); </script>

Debug

Known issues

gotchaThe `page` property is zero-based, meaning the first page is 0, the second is 1, and so on. Ensure your application logic and any user-facing page numbers account for this indexing difference.

fix

When binding `page`, pass a value that is 0-based. If displaying to a user, increment the `page` value by 1.

affects: >=1.0

gotchaThe `page` prop is not automatically updated by the component. It functions as a one-way prop. You must listen to the `page-change` event and explicitly update the `page` data property in your parent component to reflect the new active page.

fix

Use an event listener like `@page-change="currentPage = $event"` or a method that updates your bound `page` data property.

affects: >=1.0

gotchaThe default styles for `vue-ads-pagination` are not automatically included. You must manually import `vue-ads-pagination/dist/vue-ads-pagination.css` in your project's main entry file or a root component.

fix

Add `import 'vue-ads-pagination/dist/vue-ads-pagination.css';` to your main JavaScript/TypeScript file (e.g., `main.ts` or `main.js`) or within a `<style>` block in a root component.

affects: >=1.0

gotchaFor the default button rendering to display icons (e.g., for 'first', 'last', 'next', 'previous' page buttons), the component's internal templates assume the availability of Font Awesome CSS. If Font Awesome is not included in your project, these icons will not render.

fix

Install `@fortawesome/fontawesome-free` and import its CSS (e.g., `import '@fortawesome/fontawesome-free/css/all.css';`) in your project, or override the 'buttons' slot with your custom button components that do not rely on Font Awesome.

affects: >=1.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-ads-pagination> - did you register the component correctly?

The `VueAdsPagination` component was not imported and/or registered in the `components` option of the Vue instance or parent component where it is being used.

fix

Ensure `import VueAdsPagination from 'vue-ads-pagination';` is present in your script and `VueAdsPagination` is listed in the `components: {}` object of your Vue component.

Property 'total-items' is missing in type 'VueAdsPaginationProps'

The `total-items` prop is marked as required by the component but was not provided, or was provided with an incorrect name (e.g., `totalItems` instead of `total-items`).

fix

Add the `:total-items="yourTotalCount"` prop to the `<vue-ads-pagination>` component, ensuring its value is a number representing the total count of items.

TypeError: Cannot read properties of undefined (reading 'start') or TypeError: Cannot read property 'start' of undefined

This error typically occurs when attempting to access properties of the scoped slot (like `props.start`, `props.end`, `props.total`) without correctly defining the `slot-scope` attribute on the `<template>` tag.

fix

Ensure your custom slot template uses `slot-scope="props"` (Vue 2) or `#default="props"` (Vue 2.6+ / Vue 3) to correctly destructure the scoped slot properties.

Upgrade

Version history

2.1.7latest on npm

Audit

Dependencies

vuerequiredPeer dependency for any Vue component library.

@fortawesome/fontawesome-freeoptionalThe default button rendering in examples implicitly uses FontAwesome for icons, requiring its CSS for intended styling. While not a direct runtime dependency of the package's logic, it's a common usage dependency for default button aesthetics.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/arnedesmedt/vue-ads-pagination ↗

packagehttps://www.npmjs.com/package/vue-ads-pagination ↗