Best open source pagination libraries for Vue 3
Tags: vue, webdev
Published: 2023-06-08 18:54:37

**Written by [Abiola Farounbi](https://blog.logrocket.com/author/abiolafarounbi/)✏️**

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](https://blog.logrocket.com/add-pagination-next-js-app/), 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](#vue-awesome-paginate)
*   [`v-page`](#v-page)
*   [vuejs-paginate-next](#vue-js-paginate-next)
*   [Vue Use `useOffsetPagination` function](#vue-use-library)

## Vue Awesome Paginate <a name="vue-awesome-paginate">

The [Vue Awesome Paginate library](https://github.com/peshanghiwa/vue-awesome-paginate) 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)](https://developer.mozilla.org/en-US/docs/Glossary/RTL) support, SEO support, and different localization support: ![Vue Awesome Paginate Components](http://blog.logrocket.com/wp-content/uploads/2023/05/vue-awesome-paginate-components.gif)

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

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

## `v-page` <a name="v-page">

[`v-page`](https://terryz.github.io/vue3/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](https://blog.logrocket.com/a-deep-dive-into-vue-slots/). 

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:

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

![V Page Vue Pagination Library Demo](http://blog.logrocket.com/wp-content/uploads/2023/05/v-page-vue-pagination-library-demo.png)

## vuejs-paginate-next <a name="vue-js-paginate-next">

[vuejs-paginate-next](https://github.com/cloudeep/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](https://github.com/lokyoung/vuejs-paginate) library, which only supports Vue 2: ![Vue js Paginate Next](http://blog.logrocket.com/wp-content/uploads/2023/06/vuejs-paginate-next.gif)

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](https://blog.logrocket.com/trying-out-the-new-bootstrap-5-with-react/) 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:

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

## Vue Use `useOffsetPagination` function <a name="vue-use-library">

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](https://vueuse.org/). 

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](https://vueuse.org/core/useOffsetPagination/) is used. First, we install and import the library into the component:

```javascript
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:

```javascript
// 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:

```javascript
//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:

```javascript
<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](https://twitter.com/abiolaesther_) 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](https://lp.logrocket.com/blg/vue-signup).

![LogRocket Signup](https://files.readme.io/00591d0-687474703a2f2f692e696d6775722e636f6d2f6a3049327856572e706e67.png)](https://lp.logrocket.com/blg/vue-signup)

[LogRocket](https://lp.logrocket.com/blg/vue-signup) 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](https://lp.logrocket.com/blg/vue-signup).