nuxt-x-affiliate
Listing Grid
Filterable, paginated set of directory listings with in-memory search and category filtering.
Listing Grid
A filterable, paginated set of <XAFListingCard>s.
It filters and pages in memory — it takes the full list up front, which suits a directory generated from content files at build time.
For a server-driven listing with URL-addressable pages, compose <XAFListingCard>
with <XAFPagination> and
<XAFSearchFilters> instead; those keep
state in the route, which this component deliberately does not.
Components
<XAFListingGrid />
<XAFCategoryHero :category="category" />
<XAFSection>
<XAFListingGrid :listings="listings" :per-page="12" :columns="3" />
</XAFSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listings | DirectoryListing[] | required | The full set to filter |
categories | string[] | derived from listings | Options in the category filter |
layout | 'grid' | 'list' | 'grid' | Grid of tiles, or a stacked list of rows |
columns | 2 | 3 | 4 | 3 | Columns in grid layout |
showSearch | boolean | true | Show the search input |
showFilters | boolean | true | Show the category select |
showPagination | boolean | true | Page the results |
perPage | number | 12 | Items per page |
cardLayout | 'card' | 'row' | 'compact' | from layout | Layout passed to each card |
emptyMessage | string | 'No listings match your filters.' | Empty-state text |
Tips
- The result count is announced in a
role="status"live region. Filtering happens without a page load, so without it a screen-reader user gets no feedback that the results changed. - Changing a filter resets to page 1. Paging also clamps defensively, so a page number left over from a wider result set lands on the last page rather than an empty grid.
- The filter and paging logic lives in
app/utils/directory.ts(filterListings,paginate,pageCount,collectCategories) and is unit-tested separately — reuse it if you build a custom listing surface.
AI Context
component: XAFListingGrid
package: "@xenterprises/nuxt-x-affiliate"
use-when: Filterable, paginated directory listing built from a full in-memory list