nuxt-x-marketing

HeaderNav

App-shell navigation header that reads its logo, nav links, and CTA buttons entirely from appConfig.xMarketing.header.

HeaderNav

The XHeaderNav component is an X-prefixed app-shell navigation header that pulls all of its content (logo, nav links, CTA buttons) from app.config.xMarketing.header. It auto-responds to dark mode via UColorModeImage and uses Nuxt UI's UHeader for the responsive container + mobile drawer. Drop it once at the top of your default layout and configure it once.

Prefer XXHeaderNav for the X-branded equivalent with the same contract.

Components

`<XHeaderNav />`

Configure once in app.config.ts, then render once at the layout root:

<XHeaderNav />

// app.config.ts
export default defineAppConfig({
  xMarketing: {
    header: {
      logo: {
        src: "/logo-light.svg",
        srcDark: "/logo-dark.svg",
        alt: "Acme"
      },
      nav: {
        links: [
          { label: "Features", to: "/features" },
          { label: "Pricing", to: "/pricing" }
        ],
        buttons: [
          { label: "Sign In", to: "/login", variant: "ghost", color: "neutral" },
          { label: "Get Started", to: "/signup", variant: "solid", color: "primary" }
        ]
      }
    }
  }
});

The component takes no props — every piece of content is config-driven.

AI Context

category: App Shell
package: "@xenterprises/nuxt-x-marketing"
components:
  - XHeaderNav
use-when: >
  Building a config-driven app-shell header where nav links, logo, and CTAs
  are defined once in app.config.ts and reused across every page. Pair with
  XFooter for a complete config-driven shell. For props-based headers use
  XHeaderApp; for the X-branded contract equivalent use XXHeaderNav.
typical-page-section: Mounted once at the top of the default layout.

Edit this pageorReport an issue

HeaderApp

App-shell header built on Nuxt UI's UHeader, with explicit navLinks/primaryCta/secondaryCta props and a transparent mode for use over hero backgrounds.

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.