X Enterprises
nuxt-x-marketing

XXFooter (Branded)

X Enterprises branded footer that reads its logo, body, link columns, social icons, and background from appConfig.xMarketing.footer, plus an optional newsletter signup that emits a `newsletter-submit` event.

XXFooter (Branded)

The XXFooter component is the X Enterprises branded contract-equivalent of XFooter. Both render the same multi-column appConfig-driven footer; the key difference is the newsletter integration: XXFooter emits a newsletter-submit event with the entered email so callers can wire it to a real email service, while XFooter logs to the console. Pair with XXHeaderNav for a complete X-branded, config-driven app shell.

Components

<XXFooter />

<XXFooter @newsletter-submit="subscribeUser" />

function subscribeUser(email) {
  return $fetch('/api/newsletter/subscribe', {
    method: 'POST',
    body: { email }
  })
}

// app.config.ts
export default defineAppConfig({
  xMarketing: {
    footer: {
      logo: { src: "/logo.svg", alt: "Acme" },
      body: "The all-in-one platform for modern teams.",
      socials: [
        { name: "X",      url: "https://x.com/acme",      icon: "i-simple-icons-x" },
        { name: "GitHub", url: "https://github.com/acme", icon: "i-simple-icons-github" }
      ],
      columns: [
        { headerLabel: "Product", links: [
          { label: "Features", to: "/features" },
          { label: "Pricing",  to: "/pricing" }
        ]}
      ]
    },
    config: {
      emailMarketingNewsletters: {
        organizationId: "" // Set to your org ID to render the newsletter signup
      }
    }
  }
});

Emits

EventPayloadDescription
newsletter-submitemail: stringFired when a visitor submits the newsletter form. Wire it to your email service provider.

The component otherwise takes no props.

AI Context

category: App Shell
package: "@xenterprises/nuxt-x-marketing"
components:
  - XXFooter
use-when: >
  Building an X-branded app-shell footer that needs to forward newsletter
  submissions to a real backend. Use XXFooter when you need the
  `newsletter-submit` event; use XFooter when console-logging is acceptable.
  For a generic white-label footer with explicit props (no appConfig) use
  XMarkLayoutFooter.
typical-page-section: Mounted once near the bottom of the default layout.

XXHeaderNav (Branded)

X Enterprises branded navigation header — reads logo, nav links, and CTAs from appConfig.xMarketing.header. The contract-equivalent of XHeaderNav.

XXLegal (Branded)

X Enterprises branded legal bar — minimal copyright + legal-link row that defaults to X Enterprises content (logo, 2016–present copyright, Terms/Privacy/Cookie). Overridable for white-label use. The contract-equivalent of XFooterXLegal.

Copyright © 2026