Pagination is used by components that return multiple pages of results—such as posts, products, comments, orders, or any list‑based component. It automatically generates page links, previous/next navigation, and first/last page controls.

To activate pagination, wrap your pagination markup in an element containing:

data-pagination

This container will automatically receive pagination data from the parent component.

Connecting Pagination to a Component

Pagination must know which component it belongs to. This is done using the following attributes:

Attribute Description
data-v-parent-component Component name (products, posts, comments, etc.)
data-v-parent-index Index of the component on the page (useful when multiple components of the same type exist)
data-v-query-string Whether to preserve existing URL parameters (true/false)
data-v-parameters Extra parameters to include in pagination URLs (JSON object) `

Example

<div data-pagination
     data-v-parent-component="products"
     data-v-parent-index="0"
     data-v-query-string="true"
     data-v-parameters='{"type":"post","myparam":"value"}'>

This ensures the pagination controls update the correct component and preserve or extend URL parameters.

Pagination Data Attributes

The pagination container receives several dynamic values:

Attribute Description
data-count Total number of pages
data-current-page Current page number
data-current-url Current page URL

These values can be used to show page indicators, disable buttons, or highlight the active page.

Page Elements

Pagination uses several repeatable or conditional elements to build navigation.

Page List Items

Each page number is wrapped in:

data-page

Inside it, you can use:

  • data-page-url — URL for that page
  • data-page-no — Page number

Example:

<li data-page>
  <a data-page-url data-page-no href="/shop/2">2</a>
</li>

First Page

Rendered only when the current page is not the first.

<li data-first>
  <a data-page-url>First</a>
</li>

Previous Page

Rendered only when current_page > 1.

<li data-prev>
  <a data-page-url title="Previous page">
    <span class="la la-arrow-left"></span>
  </a>
</li>

Next Page

Rendered only when current_page < pagecount.

<li data-next>
  <a data-page-url title="Next page">
    <span class="la la-arrow-right"></span>
  </a>
</li>

Last Page

Rendered only when the current page is not the last.

<li data-last>
  <a data-page-url>Last</a>
</li>

Full Pagination Example

<div data-pagination
     data-v-parent-component="products"
     data-v-parent-index="0"
     data-v-query-string="true"
     data-v-parameters="{}">

  <nav data-v-if="pagecount > 1">
    <ul>

      <!-- Previous -->
      <li class="page-item pager-prev" data-prev>
        <a data-page-url data-v-if="current_page > 1" title="Previous page">
          <span class="la la-arrow-left la-lg"></span>
        </a>
      </li>

      <!-- Page Numbers -->
      <li class="active" data-page>
        <a data-page-url data-page-no href="/shop">1</a>
      </li>

      <li data-page>
        <a data-page-url data-page-no href="/shop/2">2</a>
      </li>

      <li data-page>
        <a data-page-url data-page-no href="/shop/3">3</a>
      </li>

      <li data-page>
        <a data-page-url data-page-no href="/shop/4">4</a>
      </li>

      <!-- Next -->
      <li data-next>
        <a data-page-url data-v-if="current_page < pagecount" title="Next page">
          <span class="la la-arrow-right la-lg"></span>
        </a>
      </li>

    </ul>
  </nav>

</div>

This example shows a typical pagination block with previous/next arrows and numbered pages.

How Pagination Works Internally

  • The parent component (posts, products, comments, etc.) calculates:
    • total items
    • items per page
    • total pages
    • current page
  • Pagination receives these values and generates:
    • page links
    • first/prev/next/last controls
    • URLs with preserved or extended query parameters
  • When a user clicks a page link, the component reloads with the new page number.