Vue ads pagination is a vue js pagination component. On the left side you find some information about the shown items.

On the right side you can select a specific, the first, last, next or previous page.

It uses the handy tailwind css library for styling.


You can install the package via npm or yarn.


npm install vue-ads-pagination --save


yarn add vue-ads-pagination


You can use the vue-ads-pagination component by using the following code in your project.

  <div id="app">

import VueAdsPagination from 'vue-ads-pagination';

export default {
    name: 'app',
    components: {

    methods: {
        pageChange (page, range) {
            console.log(page, range);


property required default description
page false 0 A zero-based number to set the initial page
itemsPerPage false 10 The max amount of items on one page
maxVisiblePages false 5 The number of pages to be visible if their are too many pages
totalItems true The total amount of items


method parameters description
pageChange page, range Emitted on creation, to know the initial state, and if another page is clicked. Two parameters are given: The zero-based page and the range. This is an object that contain the start and end keys. They contain a zero-based number to identify the items to be shown.


We use the jest framework for testing this pagination component. Run the following command to test it:

npm run test:unit


If you have any issues (bugs, features, ...) on the current project, add them here.