nuxt-x-affiliate
Taxonomy Archive
Category/tag/topic archive grid with cover images, descriptions, counts, and list/grid layouts. Auto-emits CollectionPage schema.
Taxonomy Archive
The XAFTaxonomyArchive component renders a category, tag, or topic archive page. Use it as the page-level component for /categories, /tags, /topics/[name], or similar taxonomy landing pages. It pairs with <XAFCategoryIndex> (which renders inline category links) — use this component when you want a full archive page.
Components
<XAFTaxonomyArchive />
<XAFTaxonomyArchive
title="All Categories"
intro="Browse every product category we cover."
:items="categories"
:columns="3"
layout="grid"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Page title (e.g. "All Categories") |
items | TaxonomyArchiveItem[] | required | Each item has label, href, optional count, description, and image |
taxonomy | 'category' | 'tag' | 'topic' | 'custom' | 'category' | Taxonomy kind — used in the auto-emitted CollectionPage schema |
columns | 2 | 3 | 4 | 3 | Number of grid columns at full width |
layout | 'grid' | 'list' | 'grid' | 'grid' renders cards; 'list' renders denser rows |
showEmpty | boolean | true | Show an empty state when items is empty |
emptyMessage | string | 'Nothing here yet.' | Empty state message |
intro | string | — | Intro paragraph shown above the grid |
Item shape
interface TaxonomyArchiveItem {
label: string // Display label (e.g. "Coffee Makers")
href: string // Link target (e.g. "/categories/coffee-makers")
count?: number // Badge count (e.g. 42)
description?: string // Short description shown below the label
image?: string // Optional cover image URL
}
Layouts
Grid (default):
<XAFTaxonomyArchive title="Categories" :items="cats" layout="grid" :columns="3" />
Cards with optional cover image, label, count badge, and 2-line description.
List:
<XAFTaxonomyArchive title="Tags" :items="tags" layout="list" />
Denser row layout — better for long taxonomies (50+ entries) and mobile.
Auto-emitted schema
<XAFTaxonomyArchive> calls useSiteMeta() internally, which emits a CollectionPage-flavored schema.org payload via useHead(). Search engines will see the page title and intro as the page description.
Tips
- For a category landing page that shows recent posts in each category, use
<XAFCategoryIndex>instead — it renders the same kind of grid but pulls recent items automatically. - For paginated archives (e.g. 50 categories), pair with
<XAFPagination>to break the grid into pages. - The empty state is intentionally a plain dashed-border message so it's visible without being intrusive. Override via
emptyMessage.
AI Context
component: XAFTaxonomyArchive
package: "@xenterprises/nuxt-x-affiliate"
use-when: Full-page taxonomy archive (categories, tags, topics) with grid or list layout