Пагинация в Vue с 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");

Этот код подключает библиотеку и её CSS — теперь компонент пагинации доступен по всему приложению.

Пример: простое приложение на Vue с JSONPlaceholder

Ниже — минимальный пример компонента, который загружает комментарии и показывает их в списке.

Скопируйте в App.vue (начальный вариант):

Этот компонент использует Composition API и Axios: комментарии загружаются перед монтированием (onBeforeMount) и сохраняются в реактивный массив comments.

Интеграция vue-awesome-paginate: разделение на страницы

Теперь изменим компонент, чтобы показывать по 10 комментариев на страницу и управлять текущей страницей.

Замените секцию