nuxt-x-affiliate
Category Index
Inline category grid for category landing pages. Pairs recent posts per category with a "Browse all" link.
Category Index
The XAFCategoryIndex component renders a category landing page where each card shows the category name, description, count, and the 3 most recent reviews in that category. For a pure category list with no per-category content, use <XAFTaxonomyArchive> instead.
Components
<XAFCategoryIndex />
<XAFCategoryIndex :categories="categories" :columns="2" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
categories | CategoryWithPosts[] | required | Each category has slug, label, optional description, optional image, and posts: Review[] |
columns | 2 | 3 | 2 | Grid columns at full width |
postsPerCategory | number | 3 | Max number of recent posts shown per category |
title | string | 'Browse by Category' | Page heading |
showAllHref | string | — | Optional "Browse all categories" link target |
Category shape
interface CategoryWithPosts {
slug: string
label: string
description?: string
image?: string
posts: Review[] // already sorted by publishedAt desc
count?: number // total posts in category (shown if posts.length < count)
}
Tips
- Use this for the homepage "Browse by Category" section. For a dedicated
/categoriespage with no per-category post lists, use<XAFTaxonomyArchive>. - Compute the
posts: Review[]per category on the server (Nuxt Content query, CMS query) — the component is purely presentational. - If a category has more than
postsPerCategoryposts, render a "View all in {label}" link to the category page.
AI Context
component: XAFCategoryIndex
package: "@xenterprises/nuxt-x-affiliate"
use-when: Homepage "Browse by Category" grid with recent posts per category