nuxt-x-marketing
NewsletterForm
Flexible newsletter signup form in default, inline, card, and compact variants with success/error state handling.
NewsletterForm
An email capture form with four layout variants and built-in loading, success, and error state management. The submit event fires with the email value — wire it to your email service provider.
Components
<XMarkNewsletterForm />
An email capture form with four layout variants and built-in loading, success, and error state management. The submit event fires with the email value — wire it to your email service provider.
<XMarkNewsletterForm
title="Stay in the loop"
description="Get product updates and curated reads every week."
:button="{ label: 'Subscribe', color: 'primary' }"
placeholder="you@example.com"
variant="card"
:has-privacy="true"
privacy-text="No spam. Unsubscribe anytime."
@submit="handleNewsletterSubmit"
/>
Compact variant for sidebar use:
<XMarkNewsletterForm
title="Weekly digest"
variant="compact"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | String | 'Subscribe to our newsletter' | Form heading |
description | String | '' | Supporting text |
button | Object | { label: 'Subscribe' } | Button config { label, color? } |
variant | String | 'default' | Layout: 'default', 'inline', 'card', 'compact' |
hasPrivacy | Boolean | true | Show privacy note below the form |
Emits
| Event | Payload | Description |
|---|---|---|
submit | email: string | Fired on form submission with the entered email |
AI Context
category: Newsletter
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkNewsletterForm
use-when: >
Embedding a newsletter signup form inside existing containers such as the
blog sidebar, footer, modals, or card sections. Use XMarkSectionNewsletter
for a full-width standalone section instead.
typical-page-section: Blog sidebar, footer, CTA areas, modals.