Directory
Directory
The Directory component suite powers product listing sites, tool directories, and resource hubs. Use XMarkDirectoryListingGrid on index and category pages, XMarkDirectoryListingDetail on individual listing pages, XMarkDirectoryCategoryHero as the hero for category pages, and XMarkDirectorySubmitCTA at the bottom to drive submissions.
Components
<XMarkDirectoryListingCard />
Renders a single listing in one of three layouts: card (vertical with image), row (horizontal compact), or compact (single-line, for sidebar widgets or "similar listings").
<XMarkDirectoryListingCard
:listing="{
name: 'Linear',
description: 'The issue tracking tool you will actually enjoy using.',
logo: '/logos/linear.png',
category: 'Project Management',
tags: ['Productivity', 'Team', 'Agile'],
rating: 4.8,
reviewCount: 1240,
badge: 'Featured',
to: '/listing/linear',
}"
layout="card"
:show-rating="true"
:show-tags="true"
:show-badge="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listing | Object | Example listing | Listing object { name, description?, logo?, category?, tags?, rating?, reviewCount?, badge?, to?, ctaLabel? } |
layout | String | 'card' | Display variant: 'card', 'row', 'compact' |
showRating | Boolean | true | Show star rating |
showTags | Boolean | true | Show tag badges |
showBadge | Boolean | true | Show badge (Featured, Sponsored, New) |
<XMarkDirectoryListingDetail />
A full-page detail layout for an individual listing. Displays the logo, name, category, rating, and review count in the header. Accepts a default slot for the main description/content and includes sidebar and action slots for a buy/visit box.
<XMarkDirectoryListingDetail
:listing="{
name: 'Linear',
logo: '/logos/linear.png',
category: 'Project Management',
badge: 'Featured',
rating: 4.8,
reviewCount: 1240,
description: 'The issue tracking tool built for modern software teams.',
tags: ['Productivity', 'Agile', 'Team'],
website: 'https://linear.app',
}"
>
<p>Detailed description and content goes here...</p>
</XMarkDirectoryListingDetail>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listing | Object | Required | Listing object { name, logo?, category?, badge?, rating?, reviewCount?, description?, tags?, website?, ... } |
<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 |
<XMarkDirectoryCategoryHero />
A dark hero section designed for category landing pages. Shows the category icon, name, item count, and description. Optionally renders an integrated search input that emits the query in real-time.
<XMarkDirectoryCategoryHero
:category="{
name: 'Design Tools',
icon: 'i-lucide-palette',
count: 142,
description: 'Discover the best design tools for UI, UX, and graphic design.',
}"
:has-search="true"
search-placeholder="Search design tools..."
@search="handleSearch"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
category | Object | Default category | Category object { name, icon?, count?, description? } |
hasSearch | Boolean | true | Show integrated search input |
searchPlaceholder | String | 'Search listings...' | Input placeholder text |
Events
| Event | Payload | Description |
|---|---|---|
search | query: string | Emitted on each keystroke and on Enter |
<XMarkDirectorySubmitCTA />
A two-column section that encourages listing owners to submit their product. The left side lists benefits; the right side shows a submission card with a CTA button. Supports bold/gradient and light background variants.
<XMarkDirectorySubmitCTA
title="List your product"
description="Get discovered by thousands of buyers every month."
:features="[
'Reach 50,000+ monthly visitors',
'SEO-optimized listing page',
'Category and tag filtering',
'Analytics dashboard',
]"
:button="{ label: 'Submit a Listing', to: '/submit' }"
bg="bold"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'List your product' | Section headline |
description | String | Default description | Supporting paragraph |
features | Array | [] | Benefit list items (strings) |
button | Object | { label: 'Submit a Listing', to: '/submit' } | CTA button config { label, to } |
bg | String | 'subtle' | Background variant: 'subtle', 'bold', 'gradient' |
AI Context
category: Directory
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkDirectoryListingCard
- XMarkDirectoryListingDetail
- XMarkDirectoryListingGrid
- XMarkDirectoryCategoryHero
- XMarkDirectorySubmitCTA
use-when: >
Building a curated directory of tools, products, or resources. Use
CategoryHero + ListingGrid on index/category pages, ListingDetail on
individual listing pages, and SubmitCTA at the bottom to grow the directory.
typical-page-section: >
CategoryHero: top of category page. ListingGrid: main content area.
ListingDetail: full page for a single listing. SubmitCTA: bottom of
index and category pages.