nuxt-x-affiliate
Trending
Trending-now strip with rank numbers and view counts. Designed for the homepage above-the-fold.
Trending
The XAFTrending component renders a "Trending now" strip — typically a horizontal scroller or a vertical sidebar list of the top N reviews by recent view count.
Components
<XAFTrending />
<XAFTrending :items="trendingReviews" orientation="horizontal" :limit="5" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | TrendingItem[] | required | Top N reviews, sorted by trending score desc |
limit | number | 5 | Max items to render |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Horizontal scroll strip or vertical list |
showRank | boolean | true | Show rank number (1, 2, 3…) badge |
showViews | boolean | true | Show view count |
title | string | 'Trending Now' | Section heading |
Item shape
interface TrendingItem {
slug: string
title: string
image?: string
href?: string // defaults to /reviews/{slug}
viewsLast7d?: number // for "12.4k views this week"
rank?: number // override rank (defaults to array index + 1)
}
Tips
- Compute the trending score on the server (page views in the last 7 days, weighted by recency). The component is purely presentational.
- The horizontal orientation is great for above-the-fold homepage placement. The vertical orientation fits a sidebar.
- Pair with
<XAFLatestReviews>(latest by date) for a complete discovery strip.
AI Context
component: XAFTrending
package: "@xenterprises/nuxt-x-affiliate"
use-when: Homepage "Trending now" strip or sidebar trending list