nuxt-x-marketing
NewsletterForm
Flexible newsletter signup form in default, inline, card, and compact variants. Built-in loading state, submit event with the entered email.
NewsletterForm
An email capture form with four layout variants (default, inline, card, compact). On submit the submit event fires with the email value — wire it to your email service provider. A privacy note ("No spam. Unsubscribe anytime.") is shown by default under the form.
Components
<XMarkNewsletterForm />
<XMarkNewsletterForm
title="Stay in the loop"
description="Get product updates and curated reads every week."
:button="{ label: 'Subscribe', color: 'primary' }"
variant="card"
:has-privacy="true"
@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. The note text is hardcoded to "No spam. Unsubscribe anytime." and is not configurable. |
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.