A simple, lightweight, and customizable pagination component for Vue 3 applications.
Designed for client-side pagination interfaces where page changes trigger backend API calls.
Looking for Vue 2?
👉 https://www.npmjs.com/package/vue-pagin8
- Fully compatible with Vue 3
- Arrow-based and input-based navigation
- Customizable color themes
- Emits page-change events for API-driven pagination
- Lightweight and easy to integrate
npm install vue3-pagin8Live demo:
👉 https://f4ran.github.io/vue3-pagin8/
<template>
<Paginate
:initPage="1"
:totalPages="totalPages"
:color="'red'"
@currentPage="fetchPage"
/>
</template>
<script>
import Paginate from "vue3-pagin8";
export default {
components: { Paginate },
data() {
return {
totalPages: 10,
};
},
methods: {
fetchPage(page) {
// Call your backend API with selected page
console.log("Selected page:", page);
},
},
};
</script>import { createApp } from "vue";
import App from "./App.vue";
import Paginate from "vue3-pagin8";
const app = createApp(App);
app.component("Paginate", Paginate);
app.mount("#app");| Property | Description | Accepted Values |
|---|---|---|
initPage |
Initial page number | 1, 2, 3, ... |
totalPages |
Total number of pages | 1, 2, 3, ... |
color |
Theme color | green, red, orange, blue, gray, purple, dark |
| Event | Description | Parameters |
|---|---|---|
currentPage |
Triggered when page changes | page (Number) |
reset |
Resets component state (use with ref) |
none |
<Paginate ref="pagin8" />
<script>
this.$refs.pagin8.reset();
</script>Contributions are welcome.
Feel free to open issues or submit pull requests on GitHub.
MIT