The QPagination component is available for whenever a pagination system is required. It offers the user a simple UI for moving between items or pages.

There are two modes in which QPagination operates: with buttons only or with an inputbox. The latter allows the user to go to a specific page by clicking/tapping on the inputbox, typing the page number then hitting Enter key. If the new page number is within valid limits, the model will be changed accordingly.


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [




Custom icons

With icon replacement

With input

With input
With input color

Max pages shown

Maximum pages shown
Removing ellipses

Handling boundary

With boundary numbers

QPagination API