nuxt-x-marketing
DirectoryListingDetail
Full listing detail page with logo, name, rating, categories, tags, description, screenshots gallery, features list, and customizable action sidebar.
DirectoryListingDetail
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, plus optional screenshots gallery and features list. Includes sidebar, after-description, and reviews slots for fully customized layouts.
Components
<XMarkDirectoryListingDetail />
<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',
screenshots: ['/screenshots/1.jpg', '/screenshots/2.jpg'],
features: ['Real-time sync', 'Keyboard shortcuts', 'API access'],
}"
:has-screenshots="true"
:has-sidebar="true"
:has-reviews="true"
>
<p>Detailed description and content goes here...</p>
<template #reviews>
<XMarkSocialProofTestimonials :testimonials="reviews" />
</template>
<template #sidebar>
<div class="p-5 rounded-xl bg-neutral-50 dark:bg-neutral-900">
<UButton label="Visit Website" block />
</div>
</template>
</XMarkDirectoryListingDetail>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listing | object | Required | Listing object { name, description?, logo?, category?, badge?, rating?, reviewCount?, tags?, website?, screenshots?, features? }. |
hasScreenshots | boolean | true | Show the screenshots gallery section when listing.screenshots is non-empty. |
hasSidebar | boolean | true | Render the right-hand sidebar (default: website CTA card with category/rating/tags). |
hasReviews | boolean | false | Show the reviews slot block. |
Slots
| Slot | Description |
|---|---|
default | Main description / long-form content rendered after the screenshots gallery. |
after-description | Content inserted after the description block, before screenshots. |
reviews | Custom reviews section rendered at the bottom of the main column. Requires hasReviews. |
sidebar | Override the default sidebar widget. |
AI Context
category: Directory
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkDirectoryListingDetail
use-when: >
Building the individual listing detail page in a directory. Shows logo,
name, category, rating, tags, description, and provides slots for custom
content, screenshots, features, reviews, and a sidebar action box.
typical-page-section: Full page for a single directory listing (/directory/[slug]).