nuxt-x-affiliate
Newsletter
Email-capture form with single email field and submit. Validates email format and emits a 'xaf:newsletter:subscribed' event.
Newsletter
The XAFNewsletter component renders an inline email-capture form. Designed to drop into the footer, a homepage banner, or a sidebar.
Components
<XAFNewsletter />
<XAFNewsletter />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Subscribe to our newsletter' | Form heading |
description | string | 'Get the latest reviews in your inbox.' | Supporting copy |
submitLabel | string | 'Subscribe' | Submit button label |
successMessage | string | 'Thanks! Check your email.' | Success message |
compact | boolean | false | Inline horizontal layout (single row) |
Events
| Event | Payload | Description |
|---|---|---|
submit | { email: string } | Emitted on submit. The window-level xaf:newsletter:subscribed is also dispatched. |
The component doesn't POST to any service — that's the consuming site's job. Listen for the event and integrate with your ESP (ConvertKit, Mailchimp, etc.):
window.addEventListener('xaf:newsletter:subscribed', async (e) => {
const { email } = (e as CustomEvent<{ email: string }>).detail
await $fetch('/api/subscribe', { method: 'POST', body: { email } })
})
Tips
- Use the
compactvariant inside the site footer for a tight horizontal layout. - Use the full variant on a dedicated landing page or as a homepage banner.
- Pair with the
<XAFNewsletterArchive>component (separate page) for a "past newsletters" list.
AI Context
component: XAFNewsletter
package: "@xenterprises/nuxt-x-affiliate"
use-when: Inline email-capture form for newsletter signup