npm install @xenterprises/nuxt-x-affiliate

// nuxt.config.ts
export default defineNuxtConfig({
  extends: [['@xenterprises/nuxt-x-affiliate', { install: true }]],
})

export default defineAppConfig({
  xAffiliate: {
    referralParam: 'ref',
    referralBaseUrl: 'https://yoursite.com',
    cookieDays: 30,
    currency: 'USD',
    shareMessage: 'Check this out!',
  },
})

<script setup>
const { affiliate, stats, referralUrl, setAffiliate, setStats } = useAffiliate()

// Your app fetches data and populates state
onMounted(async () => {
  const data = await $fetch('/api/affiliate/me')
  setAffiliate(data.affiliate)
  setStats(data.stats)
})
</script>

<template>
  <XAFDashboard />
</template>

const {
  affiliate,           // Affiliate | null
  stats,               // AffiliateStats | null
  referrals,           // Referral[]
  payouts,             // Payout[]
  tiers,               // CommissionTier[]
  isLoading,           // boolean
  error,               // string | null
  isAuthenticated,     // computed — whether affiliate is set
  isActive,            // computed — whether status is 'active'
  referralUrl,         // computed — full referral URL with code
  currentTier,         // computed — current CommissionTier
  nextTier,            // computed — next CommissionTier
  progressToNextTier,  // computed — progress % to next tier
  setAffiliate,
  setStats,
  setReferrals,
  setPayouts,
  setTiers,
  reset,
} = useAffiliate()

const {
  referralCode,    // string | null
  referralSource,  // string | null (UTM source)
  detectReferral,  // () => void — detect from URL params or cookie
  clearReferral,   // () => void
  hasReferral,     // () => boolean
  getReferralCode, // () => string | null
} = useReferralTracking()

package: "@xenterprises/nuxt-x-affiliate"
use-when: >
  Adding an affiliate/referral program to a Nuxt 4 app. Provides the full
  landing page (/affiliate), authenticated dashboard (/affiliate/dashboard),
  10 XAF* components, and 2 composables. The consuming app fetches data
  from its own API and populates useAffiliate() state via setters — the
  layer handles all UI, referral link generation, and social sharing.
  Call useReferralTracking().detectReferral() in a plugin or layout to
  capture ?ref= params and persist them in a cookie. Configure branding
  and form fields under xAffiliate in app.config.ts.