nuxt-x-marketing
DirectoryListingGrid
Paginated, searchable, filterable grid of listing cards with grid/list toggle.
DirectoryListingGrid
A full-featured listing grid with client-side search, category filtering, grid/list toggle, and pagination. Internally renders XMarkDirectoryListingCard for each item.
Components
<XMarkDirectoryListingGrid />
A full-featured listing grid with client-side search, category filtering, grid/list toggle, and pagination. Internally renders XMarkDirectoryListingCard for each item.
<XMarkDirectoryListingGrid
:listings="allListings"
layout="grid"
:columns="3"
:has-search="true"
:has-filters="true"
:has-pagination="true"
:per-page="12"
:categories="['Design', 'Development', 'Marketing', 'Analytics']"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listings | Array | [] | Array of listing objects |
layout | String | 'grid' | Display mode: 'grid', 'list' |
columns | Number | 3 | Grid columns: 2, 3, 4 |
hasSearch | Boolean | true | Show search input |
hasFilters | Boolean | true | Show category filter |
hasPagination | Boolean | true | Show pagination |
perPage | Number | 12 | Items per page |
categories | Array | [] | Category options for the filter dropdown |
cardButton | Object | null | Button config passed to each listing card |
AI Context
category: Directory
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkDirectoryListingGrid
use-when: >
Building the main content area of a directory index or category page.
Provides search, category filtering, grid/list toggle, and pagination
for browsing listings.
typical-page-section: Main content area of directory index and category pages.