Pagination helps users comfortably navigate large data sets and find the information they need. 

Here's how to implement pagination in an app built with Vue .

Get started with Vue-Awesome-Paginate

Vue-awesome-paginate is a powerful and lightweight pagination library from Vue. It simplifies the process of creating paginated data displays, provides comprehensive features, an easy-to-use API, and supports various pagination scenarios.

To start using vue-awesome-paginate, install the package by running the following terminal command in your project directory:

npm install vue-awesome-paginate

Then, configure the bundle to work in your Vue app by copying the code below to the src/main.js file :

import { createApp } from "vue"; import App from "./App.vue"; import VueAwesomePaginate from "vue-awesome-paginate"; import "vue-awesome-paginate/dist/style.css"; createApp(App).use(VueAwesomePaginate).mount("#app");

This code imports and registers the package using the .use() method, so you can use it anywhere in the application. The pagination package comes with a CSS file that this code block also imports.

Build a test application using Vue

To demonstrate how the vue-awesome-paginate package works, you'll build a Vue app that displays a sample dataset. You will fetch data from the API using Axios for this app.

Copy the code block below into the App.vue file:

Vue 3 Pagination with JSONPlaceholder

{{ comments }}

Loading comments.

This block of code uses the Vue Composition API to build a component. This component uses Axios to fetch comments from the JSONPlaceholder API before Vue mounts it (the onBeforeMount hook ). It then stores the comments in the comments array , using a template to show them or a loading message until comments are available.

Integrate Vue-Awesome-Paginate into your Vue app

Now you have a simple Vue app that fetches data from the API. You can edit it to integrate the vue-awesome-paginate package. You will use this pagination feature to divide comments into different pages.

Replace the script section of the App.vue file with this code:

The above code block adds two other react references: perPage and currentPage . These references contain the number of items displayed on each page and the corresponding current page number.

This code also creates a computed ref named displayedComments . It calculates the comment's scope based on the currentPage and perPage values . It returns part of the comments array within that range, which will group comments into different pages.

Now replace the template part of the App.vue file with the following code:

Vue 3 Pagination with JSONPlaceholder

{{ comments }}

Loading comments.

The v-for attribute displays a list in the template pointing to the displayedComments array . This sample adds the vue-awesome-paginate component to which the above code passes the properties.

After styling the app, you'll have a page that looks like this:

Click on each numbered button, you will see a different group of comments.

Now you have a very basic Vue app that shows you how to effectively paginate data. You can also use infinite scroll to handle long data sets in your application. Make sure you consider your application's needs before choosing as pagination and endless scrolling both have their pros and cons.

Marvin Fry

Update 17 November 2023