nuxt-x-affiliate
Content Index
Listing-page section composing XAFContentCard grids or lists — hero header, empty state, and optional "View all" link for /reviews and /articles indexes.
Content Index
The XAFContentIndex component is the listing-page workhorse — pass it an array of items and it renders a responsive XAFContentCard grid (or list) with an optional hero header, an empty state, and a "View all" link. It powers /reviews, /articles, category indexes, and sidebar / footer "Worth reading" sections from one component.
Components
<XAFContentIndex />
<XAFContentIndex
title="Latest reviews"
subtitle="Every product we've tested, ranked and scored."
collection="reviews"
hero
:columns="3"
view-all-href="/reviews"
:items="[
{
kind: 'review',
title: 'Logitech MX Keys S review',
href: '/reviews/mx-keys-s',
category: 'Logitech',
rating: 4.6,
price: 99.99,
image: '/covers/mx-keys-s.webp',
description: 'The best low-profile wireless keyboard for typists.',
},
{
kind: 'article',
title: 'How we test mechanical keyboards',
href: '/articles/how-we-test-keyboards',
date: '2026-01-15',
description: 'A behind-the-scenes look at our testing methodology.',
},
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ContentIndexItem[] | required | Content items to render (see below). |
title | string | — | Section / page title. |
subtitle | string | — | Subtitle shown under the title (hero mode). |
collection | string | — | Semantic collection name (e.g. 'reviews'). Used for the aria-label. |
hero | boolean | false | Render a prominent <h1> hero header (index pages) instead of the inline <h2> header (sidebars / footers). |
columns | 2 | 3 | 4 | 3 | Grid columns at full width. |
layout | 'grid' | 'list' | 'grid' | Layout mode. |
emptyMessage | string | 'Nothing here yet.' | Empty-state message. |
showEmpty | boolean | true | Show the empty state when items is empty. |
viewAllHref | string | — | Optional "View all" link target. |
viewAllLabel | string | 'View all' | "View all" link label. |
ContentIndexItem
Each item is forwarded to XAFContentCard via v-bind, so every card prop is supported:
| Field | Type | Description |
|---|---|---|
title | string | Page title (review name or article title). Required. |
href | string | Target URL. Required. |
kind | 'review' | 'article' | Card variant — controls top-row content, price line, title size. Required. |
category | string | Brand name (reviews) or category (articles). |
rating | number | Star rating 0–5 (reviews only). |
price | number | Build-time-captured price (reviews). |
date | string | ISO YYYY-MM-DD publish date (articles). |
meta | string | Secondary meta line. |
description | string | Short excerpt / teaser. |
ctaLabel | string | CTA text. |
image / imageAlt | string | Optional cover image + alt text. |
imageAspect | 'video' | 'square' | 'auto' | Aspect-ratio mode for the cover image. |
imageLoading | 'lazy' | 'eager' | Loading strategy — pass 'eager' for the first 1–3 cards so the LCP image isn't deferred. |
imageWidth / imageHeight | number | string | Explicit dimensions (reserves layout space, prevents CLS). |
AI Context
component: XAFContentIndex
package: "@xenterprises/nuxt-x-affiliate"
use-when: Listing pages (/reviews, /articles, category indexes) and sidebar/footer card sections — composes XAFContentCard into a grid or list with hero header, empty state, and "View all" link.