nuxt-x-affiliate
Pros & Cons
1- or 2-column pros and cons list. Auto-collapses to a single column when only one side has content.
Pros & Cons
The XAFProsCons component renders a 1- or 2-column pros and cons block on review pages. Auto-collapses to a single column when only one side has content, and shows an empty-state message when both are empty.
Components
<XAFProsCons />
<XAFProsCons
:pros="['Long battery life', 'Great sound']"
:cons="['A bit pricey']"
/>
<XAFProsCons
:pros="['Easy setup', 'Beautiful design']"
:cons="[]"
columns="2"
pros-label="What we like"
cons-label="What we don't"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
pros | string[] | [] | List of pros. |
cons | string[] | [] | List of cons. |
columns | 1 | 2 | 2 | Number of columns. Auto-collapses to 1 if only one side has content. |
prosLabel | string | 'What we like' | Header for the pros section. |
consLabel | string | "What we don't" | Header for the cons section. |
Behavior
- Both empty → renders an empty-state message.
- Only
pros→ renders pros in a single column. - Only
cons→ renders cons in a single column. - Both with content +
columns="2"→ renders both side by side. - Both with content +
columns="1"→ renders pros stacked above cons.
AI Context
component: XAFProsCons
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
Adding a pros/cons block to a review page. Pass :pros and :cons as
string arrays. Set columns="2" for side-by-side, columns="1" for
stacked. Auto-collapses to 1 column when only one side has content.
Renders an empty-state message when both sides are empty.