nuxt-x-affiliate
Pagination
Numbered page navigation for archives and lists with prev/next buttons and ellipsis gaps. Query-string or path-style URLs.
Pagination
The XAFPagination component renders a numbered page navigation for archives, search results, taxonomy pages, or any list view. It auto-generates ellipsis gaps so you don't have to compute page ranges, and supports both query-string and path-style URLs.
Components
<XAFPagination />
<XAFPagination
:current-page="currentPage"
:total-pages="totalPages"
base-url="/blog"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
currentPage | number | required | Current page (1-indexed) |
totalPages | number | required | Total number of pages |
baseUrl | string | required | Base URL for page links. The component appends ?page=N or /page/N depending on urlStyle. |
siblingCount | number | 1 | Number of siblings to show on each side of the current page |
urlStyle | 'query' | 'path' | 'query' | query emits ?page=N, path emits /page/N appended to baseUrl |
showPrevNext | boolean | true | Show prev/next buttons |
URL styles
Query (default):
<XAFPagination :current-page="2" :total-pages="10" base-url="/blog" />
<!-- Emits: /blog?page=2, /blog?page=3, /blog?page=4, ... -->
Path:
<XAFPagination :current-page="2" :total-pages="10" base-url="/blog/page" url-style="path" />
<!-- Emits: /blog/page/2, /blog/page/3, /blog/page/4, ... -->
The path style always strips a trailing slash from baseUrl and appends /page/N. Page 1 always links to the base URL (no /page/1 suffix).
Sibling count
siblingCount controls how many page numbers flank the current page. With siblingCount: 1 on page 7 of 10: 1 … 6 7 8 … 10. With siblingCount: 2: 1 … 5 6 7 8 9 … 10.
The first and last pages are always shown, regardless of siblingCount.
Tips
- The component is purely presentational — compute
currentPageandtotalPagesfrom your data source (Nuxt Content, an API, etc.) and pass them in. - For search engines, link to page 1 with the bare
baseUrl(no?page=1) and pages 2+ with the page parameter. The component handles this automatically. - Pair with
<XAFSearchFilters>for paginated filter UIs.
AI Context
component: XAFPagination
package: "@xenterprises/nuxt-x-affiliate"
use-when: Any list/archive/search-results page that needs page navigation