Пагинация в Vue с vue-awesome-paginate

Стопка книг с открытыми страницами

Введение

Пагинация позволяет разделять большие массивы данных на небольшие логические части. Это снижает нагрузку на клиент и сервер, облегчает восприятие информации пользователем и упрощает навигацию по контенту.

Определение: пагинация — способ разбивки набора данных на страницы заданного размера (items per page).

Кому полезно: интерфейсам с большим числом записей (комментарии, таблицы, ленты, каталоги).

В этой статье вы получите рабочий пример на Vue 3 + vue-awesome-paginate, код для вставки в проект и практические рекомендации по настройке и тестированию.

Начало работы с Vue-Awesome-Paginate

vue-awesome-paginate — лёгкая и удобная библиотека для пагинации в Vue. Она предоставляет настраиваемые компоненты, простые API и поддерживает разные сценарии отображения страниц.

Установка (в каталоге проекта выполните):

npm install vue-awesome-paginate

Затем подключите пакет в точке входа приложения (файл src/main.js):

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");

Этот код регистрирует плагин через .use(), после чего компонент пагинации доступен в любом компоненте приложения. Также подключается CSS библиотеки.

Построение тестового Vue-приложения (пример)

Ниже — полный пример компонента App.vue, который загружает комментарии из JSONPlaceholder и выводит их на страницу. Сначала код без пагинации — он показывает базовый поток данных.

  
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);  
});

Пояснение: пример использует Composition API и хук onBeforeMount, чтобы подгрузить комментарии через axios перед монтированием компонента.

Интеграция vue-awesome-paginate в приложение

Теперь добавим пагинацию. Замените секцию

Далее — шаблон, который выводит только отображаемые комментарии и сам компонент пагинации:

После стилизации вы получите интерфейс, похожий на этот:

Скриншот Vue-приложения с постраничным отображением комментариев

Нажимая на номера страниц, вы будете переключать набор отображаемых комментариев.

Практические советы по настройке

Переменная perPage: общепринятые значения — 10, 20, 50; подбирайте по типу контента и скорости загрузки.
SEO: для индексируемых списков используйте Canonical и rel=”prev/next” при серверной пагинации.
Клиентская vs серверная пагинация: если набор большой (>1000 записей) — лучше серверная пагинация (запросы с offset/limit или cursor).
Accessibility: кнопки пагинации должны быть фокусируемыми и иметь aria-label.

Важно: если данные динамически меняются (фильтры, сортировка), синхронизируйте currentPage с изменениями данных (сброс на 1 при смене фильтра).

Когда пагинация не подойдёт (когда выбрать бесконечную прокрутку)

Ленты с непрерывным чтением (социальные сети) — бесконечная прокрутка даёт лучший UX.
Когда пользователю важно сохранять положение в списке и легко возвращаться к элементам — предпочитайте пагинацию.
Если нужна точная нумерация страниц (например, каталоги товаров) — пагинация предпочтительнее.

Контрпример: список коротких изображений (галерея) выгоднее с ленивой подгрузкой изображений и бесконечной прокруткой.

Альтернативные подходы

Серверная пагинация с cursor-based API (лучше масштабируется, предотвращает дубли при изменениях данных).
Библиотеки: vue-paginate, @riophae/vue-treeselect (для сложных селектов), кастомный компонент с virtual scroll.
Virtual scrolling (виртуализация) — показывает лишь видимые DOM-элементы, экономит память при большом количестве строк.

Критерии приёмки

При perPage=10 и total-items=100 компонент показывает 10 элементов на странице.
Нажатие на номер страницы обновляет currentPage и отображает соответствующий срез массива.
При изменении фильтра currentPage сбрасывается на 1.
Компонент корректно работает при отсутствии данных (показывает сообщение загрузки или пустой список).
Все элементы пагинации доступны с клавиатуры и имеют aria-атрибуты.

Чек-лист ролей

Разработчик:

Подключил пакет и CSS.
Реализовал computed displayedComments.
Сброс страниц при фильтре.

QA:

Тесты переключения страниц (unit/integration).
Тесты accessibility (tab order, aria-label).
Тесты на граничных значениях (пустой список, 1 элемент, нечетное число в perPage).

PM/PO:

Подтвердить значение perPage по требованию продукта.
Утвердить требуемое поведение при фильтрации и сортировке.

Мини-методология внедрения (3 шага)

Прототип: подключить vue-awesome-paginate в отдельном компоненте с мок-данными.
Интеграция: заменить мок-сервис на реальный API; выбрать client/server pagination.
QA и улучшения: провести тесты производительности и доступности, при необходимости добавить виртуализацию.

Тест-кейсы (дословно)

Открыть страницу с 45 комментариями, perPage=10: должно быть 5 страниц, последняя содержит 5 элементов.
При клике на страницу 3 отображаются элементы с индексами 21-30.
При очистке фильтра currentPage становится 1.

Короткое резюме

Пагинация в Vue с vue-awesome-paginate — быстрый путь к удобной навигации по спискам. Для небольших наборов клиентская пагинация удобна и проста, для больших — используйте серверную пагинацию или cursor-based подходы. Не забывайте про доступность и тестирование.

Важно: выбор между пагинацией и бесконечной прокруткой зависит от сценария использования и ожиданий пользователей.