nuxt-x-marketing
Footer (App Shell)
App-shell footer that reads its logo, body copy, link columns, social icons, and background from appConfig.xMarketing.footer, plus an optional newsletter signup.
Footer (App Shell)
The XFooter component is the X-prefixed app-shell footer. It reads all of its content — logo, body, social icons, link columns, background image/color — from app.config.xMarketing.footer. An optional newsletter signup section is auto-rendered when an email-marketing organization ID is configured. Newsletter submissions currently log to the console; for an event-driven alternative use XXFooter.
For the X-branded contract equivalent of this footer, use
XXFooter. For a white-label generic footer with props-driven content, useXMarkLayoutFooter.
Components
<XFooter />
<XFooter />
// 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" }
]},
{ headerLabel: "Company", links: [
{ label: "About", to: "/about" },
{ label: "Contact", to: "/contact" }
]}
],
bg: {
color: "",
img: { src: "", alt: "" }
}
},
config: {
emailMarketingNewsletters: {
organizationId: "" // Optional: leave empty to hide the newsletter signup
}
}
}
});
The component takes no props. To override behavior at runtime (e.g. for a specific page) — replace it with XMarkLayoutFooter instead.
AI Context
category: App Shell
package: "@xenterprises/nuxt-x-marketing"
components:
- XFooter
use-when: >
Building an app-shell footer for an X-branded marketing site where all
footer content (logo, columns, socials, newsletter) is centralized in
appConfig.xMarketing.footer. For a generic white-label footer, use
XMarkLayoutFooter; for the contract-equivalent X-branded version that
emits newsletter-submit instead of console.log, use XXFooter.
typical-page-section: Mounted once near the bottom of the default layout.