Best open source pagination libraries for Vue 3

Nowadays, it’s more important than ever before to display data in an effective way that doesn’t cause loading delays or rendering issues. Pagination is a technique that breaks down large pages of data into smaller sections of content, making it easier for the user to navigate and locate the desired information. Pagination enhances the web app’s UX and also improves application performance by reducing overall page load times.

However, implementing pagination from scratch can be a time-consuming task, requiring a lot of effort and resources. Fortunately, there are several great open source libraries available that can simplify the process and improve your efficiency. Using a pagination library can save you time and effort, allowing you to focus on building the other, more essential features of your application.

In this article, we’ll explore some of the best pagination libraries for Vue 3, reviewing their features, popularity, and support. These libraries come equipped with pre-built components, styles, and functionality, making it easy for developers to quickly add pagination to their projects. Let’s get started!

Jump ahead:

• Vue Awesome Paginate
• v-page
• vuejs-paginate-next
• Vue Use useOffsetPagination function

Vue Awesome Paginate

The Vue Awesome Paginate library is a modern and powerful library with a variety of lightweight, customizable, and easy-to-use pagination components. Built with TypeScript and Vite, Vue Awesome Paginate provides all its pagination functionalities in one package with zero dependencies, making it easy to install and use.

Vue Awesome Paginate offers complete customization support for every component using pure CSS, allowing you to customize the look and feel of your pagination components according to your website’s design. It also provides RTL (right to left) support, SEO support, and different localization support:

By default, Vue Awesome Paginate uses the following props and events, which you can then customize based on your preferences:

 <vue-awesome-paginate
    :total-items="100"
    :items-per-page="5"
    :max-pages-shown="5"
    v-model="currentPage"
    :on-click="onClickHandler"
  />

v-page

v-page is a simple and flexible Vue 3 pagination library that offers a range of features for users to customize their pagination components. With v-page, you can use only the components you need in addition to scoped slots for more customizable options.

You can add an All option to the page size list to display all data without paging, set the current page, the total number of records, pagination language, page size menu, alignment direction, and more with props.

When the pagination data changes, the v-page library triggers a change event. Overall, v-page is a useful library for Vue developers looking to implement pagination in their applications with a variety of customization options. It comes in the following default format, so you can easily add additional props:

 <Page
    :total-row="21"
    @change="changeBasic"
  />

vuejs-paginate-next

vuejs-paginate-next is a robust Vue library that simplifies the process of implementing pagination in Vue 3 applications. To offer full support for Vue 3, the vuejs-paginate-next library was built based on the existing vuejs-paginate library, which only supports Vue 2:

The library provides an easy-to-use API that makes it simple for developers to implement pagination without having to write complex code. It comes with default styles from Bootstrap v5 but can be easily customized using CSS, making it easy to integrate with the existing application design.

vuejs-paginate-next provides a range of options for customization, including the number of pages displayed, the number of items per page, and the current page. You can use it in a component in the following format:

<paginate
  :page-count="20"
  :click-handler="functionName"
  :prev-text="Prev"
  :next-text="Next"
  :container-class="className"
/>

Vue Use useOffsetPagination function

At the time of writing, Vue 3 is still relatively new, meaning there is a limited selection of pagination libraries available for Vue 3. However, there are still quick alternatives available for developers; 0ne approach is to use external libraries that provide composable functions, like the Vue Use library.

Vue Use provides a range of useful composable functions, including a pagination function that works for Vue 3 applications. The Vue Use library is lightweight, making it a quick and efficient solution for implementing pagination in Vue 3.

The code snippet below shows an example of how the useOffsetPagination function is used. First, we install and import the library into the component:

npm i @vueuse/core


import { useOffsetPagination } from '@vueuse/core'

Depending on the use case, we can then define the various options, parameters, and functions needed:

// Creates a function that gets the current pages data from the database
function fetch(page: number, pageSize: number) {
  return new Promise<User[]>((resolve, reject) => {
    const start = (page - 1) * pageSize
    const end = start + pageSize
    setTimeout(() => {
      resolve(database.value.slice(start, end))
    }, 100)
  })
}

const data: Ref<User[]> = ref([])
const page = ref(1)
const pageSize = ref(10)
fetchData({
  currentPage: page.value,
  currentPageSize: pageSize.value,
})

// This function then calls the fetch function to get the data for the current page
function fetchData({ currentPage, currentPageSize }: { currentPage: number; currentPageSize: number }) {
  fetch(currentPage, currentPageSize).then((responseData) => {
    data.value = responseData
  })
}

Next, we can pass the values into the composition function:

//This shows the implementation of the pagination composable function,the customized values are in as parameters in the function
const {
  currentPage,
  currentPageSize,
  pageCount,
  isFirstPage,
  isLastPage,
  prev,
  next,
} = useOffsetPagination({
  total: database.value.length,
  page: 1,
  pageSize,
  onPageChange: fetchData,
  onPageSizeChange: fetchData,
})

Once that is complete, we can directly integrate it into the template:

<div>
  <div>
      total: {{ database.length }}
  </div>
  <div>
    <button :disabled="isFirstPage" @click="prev"> prev </button>
    <button
      v-for="item in pageCount"
      :key="item"
      :disabled="currentPage === item"
      @click="currentPage = item"
    >
      {{ item }}
    </button>
    <button :disabled="isLastPage" @click="next">
      next
    </button>
  </div>

With that, we’ve easily implemented a pagination feature for a database list, which allows us to view segmented portions of the list page-by-page.

Conclusion

Whether you’re building a simple web application or a complex enterprise application, implementing pagination can greatly enhance the user experience and improve your application’s performance. With the help of a pagination library, you can do so easily and efficiently.

In this article, we reviewed three great open source pagination libraries, as well as the composable useOffsetPagination function from the Vue Use library. When it comes to selecting the right pagination library, it’s crucial to consider your project’s specific requirements and desired features. Each library has its strengths and weaknesses, so you should take your time to analyze each library’s functionality and consider your project needs before making a decision.

The selected library should align with the web application’s overall design, ensuring that the pagination feature feels like a natural part of the user interface. If you have any questions, you can reach out to me on Twitter or leave a comment below. Thanks for reading!

Experience your Vue apps exactly how a user does

Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps — start monitoring for free.