Pagination component for Vue 3
Vueginate is a simple pagination component for Vue 3 applications. It includes out-of-the-box component variants for some of the most popular CSS Frameworks, such as Tailwind CSS, Bootstrap (4 and 5) and Bulma.
➜ Demo
# or `yarn add vueginate` | `npm install vueginate`
pnpm add vueginateImport the component and use it in your template.
<script setup>
import { reactive } from 'vue'
import { Vueginate } from 'vueginate'
const data = reactive({
totalItems: 86,
currentPage: 9,
itemsPerPage: 5,
})
</script>
<template>
<Vueginate
:total-items="data.totalItems"
:current-page="data.currentPage"
:items-per-page="data.itemsPerPage"
/>
</template>The above example will generate a code similar to the following: (click to show)
<nav aria-label="Page navigation">
<ul class="vueginate-container">
<li>
<a class="vg-item vg-arrow" href="#">
<span class="sr-only">Prev Page</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</li>
<li>
<a class="vg-item vg-page" href="#">1</a>
</li>
<li>
<span class="vg-item vg-disabled">…</span>
</li>
<li>
<a class="vg-item vg-page" href="#">7</a>
</li>
<li>
<a class="vg-item vg-page" href="#">8</a>
</li>
<li>
<span class="vg-item vg-active" aria-current="page">9</span>
</li>
<li>
<a class="vg-item vg-page" href="#">10</a>
</li>
<li>
<a class="vg-item vg-page" href="#">11</a>
</li>
<li>
<span class="vg-item vg-disabled">…</span>
</li>
<li>
<a class="vg-item vg-page" href="#">18</a>
</li>
<li>
<a class="vg-item vg-arrow" href="#">
<span class="sr-only">Next Page</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</li>
</ul>
</nav>Vueginate triggers a pageChange event, passing a number parameter with the new page, every time the page changes.
<script setup>
// ...
function updateData(page: number) {
data.currentPage = page
}
</script>
<template>
<Vueginate
:total-items="data.totalItems"
:current-page="data.currentPage"
:items-per-page="data.itemsPerPage"
@page-change="updateData"
/>
</template>Vueginate includes a default styles you can import inside your script:
<script setup>
import 'vueginate/css/vueginate.css'
</script>or from your style:
<style>
/* or `@import 'vueginate/css/vueginate.css';` */
@import 'vueginate';
</style>Or you can style your component based in the classes it provides:
vueginate-container: pagination containerulvg-item: every item in the listvg-page: any item that is not..., previous/next buttons, or the current pagevg-active: current pagevg-arrow: previous/next buttonvg-disabled: used for...items and for previous button (whencurrentPage === 1) and next button (whencurrentPage === totalPages)
All classes are applied to the a (or span if disabled or active) element inside the li
Vueginate includes component variants for Tailwind, Bootstrap and Bulma. You can use them importing their respective component:
<script setup>
import { VueginateTailwind } from 'vueginate'
import { VueginateBootstrap } from 'vueginate'
import { VueginateBulma } from 'vueginate'
// ...
</script>
<template>
<VueginateTailwind
:total-items="data.totalItems"
:current-page="data.currentPage"
:items-per-page="data.itemsPerPage"
/>
<VueginateBootstrap
:total-items="data.totalItems"
:current-page="data.currentPage"
:items-per-page="data.itemsPerPage"
/>
<VueginateBulma
:total-items="data.totalItems"
:current-page="data.currentPage"
:items-per-page="data.itemsPerPage"
/>
</template>- Documentation
- Support to be able to change the default
ulcontainer todiv - Support to have a fixed size for the component