vue3-paginate v1.0.2

vue3-paginate

A vue3 component which creates a good looking UI and full Functional Pagination with a lot of customizable features.

Installation

npm install vue3-paginate

Usage

vue3-paginate is a very simple, easy to use and customizable pagination component which can create UI and provides events to handle them for the pagination usage.

ES6

For Local Registration

import Vue3Paginate from "vue3-paginate";

export default {
    ...
    components : {
        Vue3Paginate,
        ...
    },
    ...
}

For Global Registration

Update main.js

import { createApp } from "vue";
import App from "./App.vue";
...
import Vue3Paginate from "vue3-paginate";

createApp(App).component("vue3-paginate", Vue3Paginate)
...

After importing the component, you can use it in your templates as:

<vue3-paginate
    :currentPage="1"
    :totalPage="50"
    @pageChange="handlePageChange"
>
</vue3-paginate>
...
</template>
<script>
...
{
    ...
    methods : {
        handlePageChange(page) {
            console.log("Intended Page :", page)
        },
    }
...
}
...

where currentPage is the page number of currently rendered page. And totalPage is the number of pages for pagination.

However, It won't render all pages from 1 to 50 as it has additional pageCount prop which is set to 5 by default which indicates highest number of pages options to render in component at a time.

Preview

Props

Before defining props, Let me list the HTML Structure for Pagination Component.

<ul :class="paginationContainerClass">
    <li :class="paginationItemClass">
        <a :class="paginationLinkClass">#Page</a>
    </li>
    .
    .
    .
    <li :class="paginationItemClass + paginationItemActiveClass">
        <a :class="paginationLinkClass">#Page</a>
    </li>
    .
    <li :class="paginationItemClass">
        <a :class="paginationLinkClass">#Page</a>
    </li>
</ul>

Events

Creator

Mohammad Dilshad Alam created and maintains this component.