nuxt-x-affiliate

Listing Detail

Full page body for one directory entry — header, description, screenshots, features, and a sticky sidebar.

Listing Detail

The page body for one directory entry: header with logo, rating and tags; description; screenshot gallery; feature checklist; and a sticky sidebar with the outbound CTA.

Components

`<XAFListingDetail />`

<XAFListingDetail :listing="listing">
  <template #after-description>
    <XAFProsCons :pros="listing.pros" :cons="listing.cons" />
  </template>
</XAFListingDetail>

Props

Prop	Type	Default	Description
`listing`	`DetailListing`	required	The entry. Extends `DirectoryListing` with `website`, `screenshots`, `features`
`showScreenshots`	`boolean`	`true`	Render the screenshot gallery
`showSidebar`	`boolean`	`true`	Render the sticky sidebar
`showReviews`	`boolean`	`false`	Render the `reviews` slot

Slots

Slot	Description
`after-description`	Extra content below the description — pros/cons, verdict, specs
`sidebar`	Replace the default sidebar card
`reviews`	Reviews section, rendered when `showReviews` is true

Tips

When listing.badge is Sponsored, the outbound link is marked rel="noopener noreferrer nofollow sponsored" — both an FTC expectation and Google's stated requirement for paid links. Any other listing gets rel="noopener noreferrer".
Screenshots accept either a bare URL string or { src, alt }. A missing alt falls back to "<name> screenshot N" rather than an empty string.

AI Context

component: XAFListingDetail
package: "@xenterprises/nuxt-x-affiliate"
use-when: Detail page body for a single directory listing

Edit this pageorReport an issue

Listing Grid

Filterable, paginated set of directory listings with in-memory search and category filtering.

Submit CTA

List your product