@vuecs/pagination

@vuecs/pagination

<VCPagination> — offset/limit pagination for Vue 3, part of vuecs. Built on Reka UI's Pagination primitives for the accessibility heavy lifting; speaks the same total / limit / offset language as your API.

✨ What's inside

• 🔢 API-shaped props — :total, :limit, :offset; a single @load emit hands you the next offset + meta for your fetch call.
• 🧮 Smart page windows — sibling-count and show-edges control truncation with ellipsis; hide-disabled trims unusable prev/next.
• 🖼️ Iconified controls — first / prev / next / last icons resolve through vuecs's icon presets (@vuecs/icons-lucide, @vuecs/icons-font-awesome) or per-instance props; labels overridable for i18n via behavioral defaults.
• ⏳ Busy-aware — :busy suppresses interaction during loads.
• 🎨 Variant axes — variant (outline / soft / ghost) × size (sm / md / lg) across all shipping themes.

📦 Installation

npm install @vuecs/pagination

⚡ Usage

<VCPagination
    :total="meta.total"
    :limit="meta.limit"
    :offset="meta.offset"
    :busy="loading"
    @load="(data) => fetchPage(data)"
/>

📚 Documentation

Full reference + live demo: vuecs.dev/components/pagination

License

Made with 💚

Published under Apache 2.0 License.