{"id":12394,"library":"vue-ads-pagination","title":"Vue Ads Pagination Component","description":"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.","status":"active","version":"2.1.7","language":"javascript","source_language":"en","source_url":"https://github.com/arnedesmedt/vue-ads-pagination","tags":["javascript","component","pagination","vue"],"install":[{"cmd":"npm install vue-ads-pagination","lang":"bash","label":"npm"},{"cmd":"yarn add vue-ads-pagination","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-ads-pagination","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for any Vue component library.","package":"vue","optional":false},{"reason":"The 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.","package":"@fortawesome/fontawesome-free","optional":true}],"imports":[{"note":"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.","wrong":"const VueAdsPagination = require('vue-ads-pagination');","symbol":"VueAdsPagination","correct":"import VueAdsPagination from 'vue-ads-pagination';"},{"note":"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.","wrong":"import VueAdsPageButton from 'vue-ads-pagination/VueAdsPageButton';","symbol":"VueAdsPageButton","correct":"import { VueAdsPageButton } from 'vue-ads-pagination';"},{"note":"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.","wrong":"import 'vue-ads-pagination/src/vue-ads-pagination.css';","symbol":"CSS","correct":"import 'vue-ads-pagination/dist/vue-ads-pagination.css';"}],"quickstart":{"code":"<template>\n    <div id=\"app\">\n        <vue-ads-pagination\n            :total-items=\"200\"\n            :max-visible-pages=\"5\"\n            :page=\"currentPage\"\n            :loading=\"loading\"\n            @page-change=\"pageChange\"\n            @range-change=\"rangeChange\"\n        >\n            <template slot-scope=\"props\">\n                <div class=\"vue-ads-pr-2 vue-ads-leading-loose\">\n                    Items {{ props.start }} to {{ props.end }} of {{ props.total }}\n                </div>\n            </template>\n            <template\n                slot=\"buttons\"\n                slot-scope=\"props\"\n            >\n                <vue-ads-page-button\n                    v-for=\"(button, key) in props.buttons\"\n                    :key=\"key\"\n                    v-bind=\"button\"\n                    @page-change=\"currentPage = button.page\"\n                />\n            </template>\n        </vue-ads-pagination>\n        <p>Current Page: {{ currentPage + 1 }}</p>\n    </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport '../node_modules/@fortawesome/fontawesome-free/css/all.css'; // For default button icons\nimport 'vue-ads-pagination/dist/vue-ads-pagination.css'; // For default styling\n\nimport VueAdsPagination, { VueAdsPageButton } from 'vue-ads-pagination';\n\nexport default Vue.extend({\n    name: 'App',\n    \n    components: {\n        VueAdsPagination,\n        VueAdsPageButton,\n    },\n\n    data () {\n        return {\n            loading: false,\n            currentPage: 4, // 0-based, so 5th page\n        };\n    },\n\n    methods: {\n        pageChange (page: number) {\n            this.currentPage = page; // Update the bound prop\n            console.log('Page changed to:', page + 1);\n        },\n        \n        rangeChange (start: number, end: number) {\n            console.log('Displaying items from', start + 1, 'to', end + 1);\n        },\n    },\n});\n</script>","lang":"typescript","description":"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."},"warnings":[{"fix":"When binding `page`, pass a value that is 0-based. If displaying to a user, increment the `page` value by 1.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Use an event listener like `@page-change=\"currentPage = $event\"` or a method that updates your bound `page` data property.","message":"The `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.","severity":"gotcha","affected_versions":">=1.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0"},{"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.","message":"For 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.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"[Vue warn]: Unknown custom element: <vue-ads-pagination> - did you register the component correctly?"},{"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.","cause":"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`).","error":"Property 'total-items' is missing in type 'VueAdsPaginationProps'"},{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'start') or TypeError: Cannot read property 'start' of undefined"}],"ecosystem":"npm"}