Pagination lets you divide large data sets into smaller, more manageable chunks. Pagination makes it easier for users to navigate large datasets and find the information they seek.
Learn about the technique, and how to implement it in Vue, with this sample project.
Getting Started With Vue-Awesome-Paginate
Vue-awesome-paginateis a powerful and lightweight Vue pagination library that simplifies the process of creating paginated data displays. It provides comprehensive features, including customizable components, easy-to-use APIs, and support for various pagination scenarios.
To begin using vue-awesome-paginate, install the package by running this terminal command in your project directory:
Then, to configure the package to work in your Vue application, copy the code below to thesrc/main.jsfile:
This code imports and registers the package with the.use()method, so you can use it anywhere in your application. The pagination package comes with a CSS file, which the code block also imports.
Building the Test Vue Application
To illustrate how the vue-awesome-paginate package works, you’ll build a Vue app that displays a sample dataset. You will befetching data from an API with Axiosfor this app.
Copy the code block below into yourApp.vuefile:
This code block usesthe Vue Composition APIto build a component. The component uses Axios to fetch comments from the JSONPlaceholder API before Vue mounts it (onBeforeMounthook). It then stores the comments in thecommentsarray, using the template to display them or a loading message until comments are available.
Integrating Vue-Awesome-Paginate Into Your Vue App
Now you have a simple Vue app that fetches data from an API, you can modify it to integrate the vue-awesome-paginate package. You will use this pagination feature to divide the comments into different pages.
Replace thescriptsection of yourApp.vuefile with this code:
This code block adds two more reactive references:perPageandcurrentPage. These references store the number of items to display per page and the current page number, respectively.
The code also creates a computed ref nameddisplayedComments. This calculates the range of comments based on thecurrentPageandperPagevalues. It returns a slice of thecommentsarray within that range, which will group the comments to different pages.
Now, replace thetemplatesection of your App.vue file with the following:
Thev-forattribute for rendering listsin this template section points to thedisplayedCommentsarray. The template adds thevue-awesome-paginatecomponent, which the snippet above passes props to. You can learn more about these and additional props in the package’s officialdocumentation on GitHub.
After styling your application, you should get a page that looks like this:
Click on each numbered button, and you’ll see a different set of comments.
Use Pagination or Infinite Scrolling for Better Data Browsing
You now have a very basic Vue app that demonstrates how to efficiently paginate data. you’re able to also use infinite scrolling to handle long data sets in your application. Make sure you consider your app’s needs before choosing, as pagination and infinite scrolling have pros and cons.
