NewsletterSection

Status: archived. This component lives under an _archive/ directory in the source repo and is not part of the actively-recommended UI surface. It ships in the published NPM tarball (1.2.3) but is not auto-imported by Nuxt because of the _archive path prefix. Use it for legacy designs only — for new work prefer XMarkSectionNewsletter, which is decoupled from any specific newsletter provider and emits/handles submission via the standard submit event.

The XNewsletterSection component renders a full-page padding section (py-24) containing a centered, rounded, primary-bordered card with a heading, subheading, and a Nuxt UI UForm for email capture. The card's background is a CDN-hosted poof image plus a bg-primary/5 overlay by default — both are overridable.

Unlike XMarkSectionNewsletter, this component POSTs directly to the emailmarketingnewsletters.com public subscribe endpoint as part of the component itself. It does not emit a submit event for the consumer to handle. It also requires organizationId to be set.

Components

<XNewsletterSection />

<!-- Manual import required — not auto-imported -->
<script setup>
import XNewsletterSection from '@xenterprises/nuxt-x-marketing/app/components/X/_archive/Newsletter/Section.vue'
</script>

<template>
  <XNewsletterSection
    organization-id="org_abc123"
    heading="Stay Up To Date"
    subheading="Stay up to date with our latest news and product announcements."
    submit-label="Subscribe"
  />
</template>

With custom card background:

<XNewsletterSection
  organization-id="org_abc123"
  card-class="bg-fit bg-center bg-no-repeat bg-primary/5"
  card-style="background-image: url('https://cdn.example.com/my-bg.webp');"
/>

Props

Behavior

• No submit emit — submission is performed in-component via $fetch(${props.endpoint}/public/subscriptions/subscribe, { method: 'POST', body: { email, organizationId } }).
• Validation: zod schema checks that email is a valid email address before submit.
• Success state: the form is hidden and a "Done! You have successfully subscribed." message is shown.
• Toast feedback: on success toast.add({ icon: 'i-lucide-badge-check', title: 'You have successfully subscribed to our newsletter.' }); on failure toast.add({ icon: 'i-lucide-alert-circle', title: 'An error occurred or you\'ve already subscribed.' }).
• Loading state: the email input is set to loading and disabled while the request is in flight.

Requirements

• Requires a Nuxt UI UForm / UInput / UButton setup (the layer already provides these).
• Requires a working useToast() (provided by Nuxt UI's @nuxt/ui/toast plugin).
• The remote service at https://api.emailmarketingnewsletters.com must be reachable from the browser (CORS-allowed) for the form to function.

AI Context

category: Newsletter
package: "@xenterprises/nuxt-x-marketing"
components:
  - XNewsletterSection
status: archived
use-when: >
  Legacy standalone newsletter signup that posts directly to the
  emailmarketingnewsletters.com public subscribe API and needs no consumer
  wiring. Prefer XMarkSectionNewsletter for new designs — it's provider-agnostic
  and emits a `submit` event for the consumer to handle.
typical-page-section: Mid-page or end-of-page standalone newsletter CTA.
import: >
  Not auto-imported (path begins with `_archive/`). Import explicitly:
  import XNewsletterSection from '@xenterprises/nuxt-x-marketing/app/components/X/_archive/Newsletter/Section.vue'