nuxt-x-affiliate
Affiliate Link
Slot-based affiliate link when you need full visual control over the CTA — still gets tagging, click events, and FTC-compliant rel attributes.
Affiliate Link
The XAFAffiliateLink component is the slot-based sibling of XAFBuyButton. When XAFBuyButton is too opinionated about layout, use this — you bring the visual; the component handles merchant tag injection, click events, and FTC-compliant rel attributes.
Components
<XAFAffiliateLink />
<XAFAffiliateLink merchant="amazon" url="https://amazon.com/dp/X">
<template #default="{ merchant, tagged }">
<button :class="['cta', { 'cta--tagged': tagged }]">
Check price on {{ merchant.displayName }}
</button>
</template>
</XAFAffiliateLink>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
merchant | MerchantId | required | Merchant to tag for. Resolved via useAffiliateContent().getMerchant(). |
url | string | required | Outbound URL. Will be tagged with the merchant's tagValue if configured. |
to | string | — | Render as <NuxtLink> if internal route. |
disabled | boolean | false | Render as a non-interactive span instead of an anchor. |
newTab | boolean | true | Open in a new tab. |
Slot props
| Prop | Type | Description |
|---|---|---|
merchant | XAffiliateContentMerchant | The full resolved merchant config (displayName, ctaLabel, color, etc.). |
merchantId | MerchantId | The merchant ID you passed in. |
tagged | boolean | true if the URL already carried a tag when passed in. Useful for visual differentiation (e.g. dimming a "tagged" link). |
Events
| Event | Payload | Description |
|---|---|---|
click | { url, merchant, originalUrl } | Fired on click. originalUrl is the URL before tag injection. |
navigate | { url } | Fired on click when to is set (internal navigation). |
Click tracking
Calls useAffiliateContent().trackClick({ ... }) which pushes affiliate_click to window.dataLayer when GTM is loaded (noop otherwise).
Examples
Custom-styled CTA button
<XAFAffiliateLink merchant="amazon" url="https://amazon.com/dp/B0CX123">
<template #default="{ merchant }">
<button class="cta-btn">
<Icon name="i-mdi-cart" /> Buy on {{ merchant.displayName }}
</button>
</template>
</XAFAffiliateLink>
Dimming a tag-already-applied link
<XAFAffiliateLink :merchant="'amazon'" :url="link.url">
<template #default="{ tagged }">
<span :class="{ 'opacity-50': tagged }">
{{ tagged ? 'Already tagged' : 'Visit' }}
</span>
</template>
</XAFAffiliateLink>
AI Context
component: XAFAffiliateLink
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
You need an affiliate link with full visual control over the CTA —
XAFBuyButton is too opinionated. XAFAffiliateLink wraps any child
element with merchant tag injection, click tracking, and FTC-compliant
rel="sponsored noopener noreferrer". Resolves merchant config via
useAffiliateContent(). Slot exposes { merchant, merchantId, tagged }
so you can vary rendering by tag presence.