nuxt-x-affiliate
Disclosure
FTC affiliate disclosure text in 4 visual variants — inline, compact, banner, and footer.
Disclosure
The XAFDisclosure component renders the FTC affiliate disclosure text. Four visual variants cover the common contexts — inline after a CTA, compact card, banner above the fold, and footer.
Components
<XAFDisclosure />
<XAFDisclosure /> <!-- inline: small text after a CTA -->
<XAFDisclosure variant="compact" /> <!-- compact: stacked, with icon -->
<XAFDisclosure variant="banner" /> <!-- banner: amber-styled bar above the fold -->
<XAFDisclosure variant="footer" /> <!-- footer: muted small text -->
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | from xAffiliateContent.disclosure.text | Override the disclosure text. |
variant | 'inline' | 'compact' | 'footer' | 'banner' | 'inline' | Visual variant. |
as | string | chosen by variant | Override the HTML tag (e.g. 'div', 'aside'). |
showIcon | boolean | true for inline/compact, false for banner/footer | Show the icon. |
Variants
| Variant | Use case | Default tag | Icon |
|---|---|---|---|
inline | Small text immediately after a CTA | <small> | Yes |
compact | Stacked card with icon, often inside XAFBuyButton | <aside> | Yes |
banner | Amber-styled bar above the fold of a review page | <aside> | No |
footer | Muted small text in the page footer | <small> | No |
Default text
If no text prop is passed and xAffiliateContent.disclosure.text is unset in app.config.ts, a sensible default is bundled. Override per-page with the text prop, or globally via app.config.ts.
export default defineAppConfig({
xAffiliateContent: {
disclosure: {
text: 'Affiliate link. We may earn a commission at no cost to you.',
position: 'above',
},
},
})
Examples
Inline after a buy button
<XAFBuyButton :link="..." />
<XAFDisclosure variant="inline" />
Banner above the fold
<XAFDisclosure variant="banner" />
<h1>Review title</h1>
AI Context
component: XAFDisclosure
package: "@xenterprises/nuxt-x-affiliate"
use-when: >
Rendering FTC-compliant affiliate disclosure text. Four variants:
inline (small text after CTA), compact (stacked card with icon — used
inside XAFBuyButton), banner (amber-styled bar above the fold), and
footer (muted small text). Text comes from app.config.ts under
xAffiliateContent.disclosure.text. Override per-instance with the text
prop. Required for FTC 16 CFR §255.5 compliance in close proximity to
affiliate claims.