nuxt-x-affiliate
Site Footer
Site-wide footer with a brand column, link columns, social row, optional newsletter band, and the required FTC legal row.
Site Footer
The site-wide footer. Structure ported from the marketing layer: brand column with description and social row, link columns, an optional newsletter band, and a bottom bar.
The legal row is not optional layout — it carries the FTC affiliate disclosure,
privacy, terms, cookies, and earnings links, resolved from xAffiliate.legal. It is a
compliance requirement, which is why it is configured separately from everything else
on this component.
Components
<XAFSiteFooter />
<XAFSiteFooter />
<XAFLegalBar />
<XAFSiteFooter
:columns="columns"
:social="[
{ label: 'YouTube', href: 'https://youtube.com/@example', icon: 'i-simple-icons-youtube' },
]"
description="Hands-on kitchen gear reviews since 2019."
/>
Configure the shared parts once instead of passing them per page:
export default defineAppConfig({
xAffiliate: {
brand: { name: 'BestKitchenGear', tagline: 'Tested, not spec-sheeted.' },
footer: {
description: 'Hands-on kitchen gear reviews since 2019.',
socials: [{ label: 'YouTube', href: 'https://youtube.com/@example', icon: 'i-simple-icons-youtube' }],
},
// Drives the legal row. NOT under `footer` — these links are required.
legal: { baseUrl: 'https://x.enterprises/legal' },
},
})
Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | FooterColumn[] | Reviews + About | Link columns |
showLegal | boolean | true | Render the legal row from xAffiliate.legal |
newsletter | boolean | true | Show the newsletter band |
newsletterEndpoint | string | '/api/newsletter' | Where the newsletter form posts |
newsletterTitle | string | 'Get the best deals' | Newsletter heading |
newsletterDescription | string | 'Weekly roundup of the top picks.' | Newsletter subhead |
social | { label, href, icon? }[] | xAffiliate.footer.socials | Social icon row |
description | string | footer.description, then brand.tagline | Blurb under the brand |
logo | string | footer.logo, then brand.logo | Footer mark |
Slots
| Slot | Description |
|---|---|
brand | Replace the logo / wordmark block |
Tips
- Set
:newsletter="false"on sites that intentionally don't collect email addresses — privacy-first sites whose public privacy notice says so. - The legal row renders whenever
xAffiliate.legalis configured, independent of the link columns above it. Don't rebuild those links by hand incolumns.
Migration
The brand-blurb slot was replaced by the description prop and the wider brand
slot. Move that copy to :description or xAffiliate.footer.description.
AI Context
component: XAFSiteFooter
package: "@xenterprises/nuxt-x-affiliate"
use-when: Site-wide footer with brand, link columns, newsletter, and FTC legal links