nuxt-x-affiliate

Category Hero

Dark category banner for a directory or taxonomy index — icon, name, count, description, and live search.

Category Hero

The banner at the top of a directory or taxonomy index — icon badge, category name, listing count, description, and an optional search box.

Pair it with <XAFListingGrid> below.

Components

`<XAFCategoryHero />`

<XAFCategoryHero
  :category="{
    name: 'Coffee Gear',
    icon: 'i-lucide-coffee',
    count: 42,
    description: 'Grinders, kettles, and scales we have actually used.',
  }"
  @search="query = $event"
/>

Props

Prop	Type	Default	Description
`category`	`{ name, icon?, count?, description? }`	required	The category being shown
`showSearch`	`boolean`	`true`	Show the search box
`searchPlaceholder`	`string`	`'Search listings…'`	Input placeholder

Events

Event	Payload	Description
`search`	`string`	Fires on every change to the query — wire this to live filtering
`submit`	`string`	Fires when the visitor presses Enter

Tips

The marketing component this replaced emitted search twice for the same keystroke — once from a watcher, once from @keyup.enter — so a consumer firing a request per event did the work twice on every Enter press. Here the watcher is the only source of search, and Enter emits a separate submit for callers that want to distinguish "still typing" from "go".
count is rendered with thousands separators and pluralised.

AI Context

component: XAFCategoryHero
package: "@xenterprises/nuxt-x-affiliate"
use-when: Banner at the top of a directory or taxonomy index page

Edit this pageorReport an issue

Post Navigation

Previous / next links at the foot of an article or review.

Listing Card

One directory entry as a grid tile, a wide row, or a dense compact line.