To implement pagination in a Vue.js application, follow these steps:
Install the vue-pagination package by running the following command in your terminal:
npm install vue-pagination
Import the vue-pagination component into your Vue component:
import VuePagination from 'vue-pagination';
Register the VuePagination component in your Vue component:
export default {
components: {
VuePagination,
},
// ...
}
In your template section, add the VuePagination component with the necessary props:
<template>
<div>
<!-- Your paginated content here -->
<ul>
<li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
</ul>
<!-- Add the VuePagination component -->
<vue-pagination
:currentPage="currentPage"
:totalPages="totalPages"
@pageChange="onPageChange"
></vue-pagination>
</div>
</template>
In your script section, define the necessary data and methods:
export default {
data() {
return {
currentPage: 1,
itemsPerPage: 10,
data: [],
};
},
computed: {
totalPages() {
return Math.ceil(this.data.length / this.itemsPerPage);
},
paginatedData() {
const startIndex = (this.currentPage-1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
return this.data.slice(startIndex, endIndex);
},
},
methods: {
onPageChange(page) {
this.currentPage = page;
},
},
// ...
}
Update the data array with your actual data that needs to be paginated.
Customize the pagination component according to your design needs using CSS.
With the above steps, you should be able to implement pagination in your Vue.js application.