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: [



With input

With input color

Maximum pages shown

Removing ellipses

With boundary numbers

QPagination API