nuxt-x-affiliate
Bundle
Bundle of two or more affiliate products with savings label and total — uses taggedLink for merchant-tagged URLs.
Bundle
The XAFBundle component renders a "bundle deal" block — two or more products grouped together with a savings label and the total of their tagged prices. Each product URL is tagged with the merchant's configured tagValue via useAffiliateContent().taggedLink().
Components
<XAFBundle />
<XAFBundle
name="The Home Barista Kit"
description="Everything you need to pull espresso shots at home."
savings-label="Save $30 vs. buying separately"
:savings-amount="30"
:items="[
{ link: { merchant: 'amazon', url: 'https://amazon.com/dp/A1', price: 199, label: 'Espresso machine' } },
{ link: { merchant: 'amazon', url: 'https://amazon.com/dp/A2', price: 49, label: 'Burr grinder' } },
{ link: { merchant: 'amazon', url: 'https://amazon.com/dp/A3', price: 89, label: 'Milk frother' } },
]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | required | Bundle name shown in the header. |
description | string | — | Bundle description. |
savingsLabel | string | — | Savings label (e.g. "Save $30 vs. buying separately"). |
savingsAmount | number | — | Savings amount in dollars (display only). |
items | BundleItem[] | required | Each item is { link: AffiliateLink, label? }. |
AI Context
component: XAFBundle
package: "@xenterprises/nuxt-x-affiliate"
use-when: Bundle of two or more affiliate products with savings label and total. Uses useAffiliateContent().taggedLink for merchant-tagged URLs.