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-paginate is 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:

 npm install vue-awesome-paginate 

Then, to configure the package to work in your Vue application, copy 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 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 be fetching data from an API with Axios for this app.

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

 <script setup>
import { ref, onBeforeMount } from "vue";
import axios from "axios";

const comments = ref([]);

const loadComments = async () => {
  try {
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/comments`,
    );

    return response.data.map((comment) => comment.body);
  } catch (error) {
    console.error(error);
  }
};

onBeforeMount(async () => {
  const loadedComments = await loadComments();
  comments.value.push(...loadedComments);
  console.log(comments.value);
});
</script>

<template>
  <div>
    <h1>Vue 3 Pagination with JSONPlaceholder</h1>
    <div v-if="comments.length">
      <div v-for="comment in comments" class="comment">
        <p>{{ comment }}</p>
      </div>
    </div>
    <div v-else>
      <p>Loading comments...</p>
    </div>
  </div>
</template>

This code block uses the Vue Composition API to build a component. The component uses Axios to fetch comments from the JSONPlaceholder API before Vue mounts it (onBeforeMount hook). It then stores the comments in the comments array, 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 the script section of your App.vue file with this code:

 <script setup>
import { ref, computed, onBeforeMount } from 'vue';
import axios from 'axios';

const perPage = ref(10);
const currentPage = ref(1);
const comments = ref([]);

const onClickHandler = (page) => {
  console.log(page);
};

const loadComments = async () => {
  try {
    const response = await axios.get(
      `https://jsonplaceholder.typicode.com/comments`
    );

    return response.data.map(comment => comment.body);
  } catch (error) {
    console.error(error);
  }
};

onBeforeMount(async () => {
  const loadedComments = await loadComments();
  comments.value.push(...loadedComments);
  console.log(comments.value);
});

const displayedComments = computed(() => {
  const startIndex = (currentPage.value * perPage.value) - perPage.value;
  const endIndex = startIndex + perPage.value;
  return comments.value.slice(startIndex, endIndex);
});
</script>

This code block adds two more reactive references: perPage and currentPage. These references store the number of items to display per page and the current page number, respectively.

The code also creates a computed ref named displayedComments. This calculates the range of comments based on the currentPage and perPage values. It returns a slice of the comments array within that range, which will group the comments to different pages.

Now, replace the template section of your App.vue file with the following:

 <template>
  <div>
    <h1>Vue 3 Pagination with JSONPlaceholder</h1>

    <div v-if="comments.length">
      <div v-for="comment in displayedComments" class="comment">
        <p>{{ comment }}</p>
      </div>

      <vue-awesome-paginate
        :total-items="comments.length"
        :items-per-page="perPage"
        :max-pages-shown="5"
        v-model="currentPage"
        :onclick="onClickHandler"
      />
    </div>
    <div v-else>
      <p>Loading comments...</p>
    </div>
  </div>
</template>

The v-for attribute for rendering lists in this template section points to the displayedComments array. The template adds the vue-awesome-paginate component, which the snippet above passes props to. You can learn more about these and additional props in the package’s official documentation on GitHub.

After styling your application, you should get a page that looks like this:

A picture of the Vue app showing the paginated comments.
Image Screenshot by Chinedu Mgbemena (No Attribution Required)

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 can 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.