v-paginate-pretty 🎨

Beautiful and customizable pagination component for Vue 3 with Composition API. Featuring 10 stunning themes (including 3D, Cyberpunk, and Neumorphism) and TypeScript support.

Check out the live demo here: https://m-petrosyan.github.io/v-paginate-pretty/


✨ Features

- 🚀 Vue 3 Composition API - Built from the ground up for modern Vue.
- 🎨 10 Stunning Themes - From professional Glassmorphism to creative Cyberpunk & Retro styles.
- 🎲 Flexible Navigation - Optional "First/Last" and "Prev/Next" buttons.
- 📏 Customizable Layout - Control the number of visible pages.
- 🌑 Dark Mode Ready - All themes look great in dark mode.
- 🎯 Hide Numbers - Compact mode with arrows only.
- ⌨️ Accessible - ARIA labels and keyboard support.

📦 Installation

``bash
npm install v-paginate-pretty

or

yarn add v-paginate-pretty
`

🚀 Quick Start

`vue



`

🎨 Themes

$3

The basic themes provide a clean and professional look for daily use.


| Theme | Description |
|-------|-------------|
| default | Clean and professional blue design. |
| modern | Soft glassmorphism with subtle glow. |
| minimal | Bold black & white brutalist style. |
| gradient | Vibrant Sunset gradient with animations. |

$3

Added a special Isometric Cube theme that brings a 3D feel directly to your web interface using pure CSS.

`vue

`

(Visual representation of the 3D look)

📖 API Reference

$3

| Property | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| total-items | number | required | Total count of items |
| items-per-page | number | 10 | Items per page |
| current-page | number | 1 | Current active page (supports v-model) |
| max-visible-buttons| number | 5 | Max visible page buttons |
| theme | string | 'default' | Theme name (see below) |
| size | string | 'md' | Component size: sm, md, lg, xl |
| hide-numbers | boolean| false | Hide page numbers, show arrows only |
| sync-url | boolean| true | Sync current page with URL query |
| url-key | string | 'page' | URL query parameter name |
| showFirstLast | boolean | true | Show first/last page buttons |
| showPrevNext | boolean | true | Show previous/next buttons |
| disabled | boolean | false | Disable all pagination controls |
| ariaLabel | string | 'Pagination Navigation' | Custom aria-label for accessibility |

$3

We provide a collection of beautiful, high-quality themes:

| Theme | Description |
| :--- | :--- |
| default | Clean and professional blue design. |
| modern | Soft glassmorphism with subtle glow. |
| minimal | Bold black & white brutalist style. |
| gradient | Vibrant Sunset gradient with animations. |
| cube | Isometric 3D buttons with realistic depth. |
| gothic | Ornate, dark medieval aesthetic with gold accents. |
| cyberpunk | Neon yellow glitch effect with geometric cuts. |
| neumorphic | Soft, tactile UI with realistic shadows (Neumorphism). |
| aurora | Animated Northern Lights gradient flow. |
| retro | 8-bit arcade style with pixelated typography. |

$3

Change the scale of the pagination component using the size prop:

* sm: Small and compact
* md: Default balanced size
* lg: Large and prominent
* xl: Extra large for bold interfaces

`vue





`

$3

| Event | Payload | Description |
|-------|---------|-------------|
| update:currentPage | number | Emitted when page changes (for v-model) |
| change | number | Emitted when page changes |

$3

`vue



`

🎯 Using the Composable

You can also use the usePagination composable directly for custom implementations:

`vue



`

🎨 Custom Styling

You can customize the appearance using CSS variables:

`css
.v-pagination {
--v-pagination-gap: 0.5rem;
--v-pagination-button-size: 2.5rem;
--v-pagination-button-border: 1px solid #e5e7eb;
--v-pagination-button-radius: 0.5rem;
--v-pagination-button-bg: #ffffff;
--v-pagination-button-color: #374151;
--v-pagination-button-hover-bg: #f3f4f6;
--v-pagination-active-bg: #3b82f6;
--v-pagination-active-color: #ffffff;
--v-pagination-focus-ring: rgba(59, 130, 246, 0.3);
}
`

$3

`vue



`

🌐 TypeScript Support

Full TypeScript support with exported types:

`typescript
import type {
PaginationProps,
PaginationEmits,
UsePaginationOptions,
UsePaginationReturn
} from 'v-paginate-pretty'
`

♿ Accessibility

This component follows WAI-ARIA best practices:

- Proper ARIA labels on all buttons
- aria-current="page"` on active page
- Keyboard navigation support
- Focus management with visible focus rings
- Screen reader friendly

📱 Responsive Design

The component automatically adapts to smaller screens:

- Reduced button sizes on mobile
- Adjusted spacing for touch targets
- Maintains usability across all devices

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ❤️ using Vue 3 and TypeScript.

---

Enjoy using v-paginate-pretty! ⭐ Star us on GitHub if you find this useful!