nuxt-x-marketing

Marketing website layer for Nuxt 4. Provides 68 components across XMark, X, and XX prefixes (57 actively-recommended + 11 archived legacy components that ship in the published tarball but are not auto-imported) with zero required props on most, dark mode support, responsive design, WCAG 2.0 AA accessibility, and a complete CSS design system (typography, animations, glass effects). Built on Nuxt UI v4.

Installation

npm install @xenterprises/nuxt-x-marketing

Peer dependencies (all required): nuxt ^4.0.0, vue ^3.0.0, @nuxt/ui ^4.6.1, @nuxt/content ^3.0.0, better-sqlite3 ^11.0.0, @iconify-json/lucide ^1.2.82, @tailwindcss/typography ^0.5.0.

npm install @nuxt/ui @nuxt/content better-sqlite3 @iconify-json/lucide @tailwindcss/typography

What the consumer writes

The layer is batteries-included: it ships default pages (/, /blog, /blog/[...slug]), a config-driven default app shell (app.vue rendering XHeaderNav from xMarketing.header, XFooter from xMarketing.footer, and the XMarkPrivacyCookieConsent banner), a blog content collection, and the full CSS design system. A minimal consumer writes four things:

1. nuxt.config.ts — extend the layer:

// nuxt.config.ts
export default defineNuxtConfig({
  extends: "@xenterprises/nuxt-x-marketing",
});

2. app/app.config.ts — site overrides under the xMarketing namespace. It must live in app/, not the project root — at the root, Nuxt 4 silently yields only the Nuxt UI defaults. Everything deep-merges with the layer defaults, so set only what you override:

// app/app.config.ts
export default defineAppConfig({
  xMarketing: {
    name: "Acme Inc",
    url: "https://acme.com",
    header: {
      logo: { src: "/logo.svg", srcDark: "/logo-dark.svg", alt: "Acme" },
      nav: {
        links: [
          { label: "Pricing", to: "/#pricing" },
          { label: "Blog", to: "/blog" },
        ],
        buttons: [{ label: "Get Started", to: "/signup", color: "primary" }],
      },
    },
    footer: {
      logo: { src: "/logo.svg", alt: "Acme" },
      body: "Building the future of modern software.",
      socials: [
        { name: "GitHub", url: "https://github.com/acme", icon: "i-lucide-github" },
      ],
    },
    blog: { active: true, title: "Blog" },
    tracking: { gtmId: "GTM-XXXXXXX" }, // optional; fires only after consent
  },
});

3. content.config.ts — bind the blog collection to your content dir (required; see the gotcha below), and write posts as content/blog/*.md.

4. Environment variables — none. All configuration is via app/app.config.ts.

xMarketing.name and xMarketing.url also drive the shell's SEO wiring: when name is set, the shipped app.vue applies the title template "<page> | <name>" via useSeoMeta and emits og:site_name; the shipped home page reads url for its og:url. Leave both unset to keep bare titles.

To opt out of any default: override app/app.vue to replace the shell entirely, or turn individual shell parts off — xMarketing.header.active: false (navbar), xMarketing.footer.active: false (footer), xMarketing.consent.active: false (cookie-consent banner; tracking scripts then never fire). Override a page by creating your own app/pages/blog/index.vue, or disable the blog entirely with xMarketing.blog.active: false.

Gotcha: the consumer must re-declare the blog collection

Nuxt Content v3 resolves a collection's source against the content/ dir of the layer whose content.config.ts defines it. The layer ships a default blog collection, but its source resolves against the package — so it can never see your content/blog/*.md. Redefine the collection in your own content.config.ts (the consumer's definition wins over the layer's) to bind it to your content dir. This is exactly what the layer's own playground does:

// content.config.ts (consumer project root — same as .playground/content.config.ts)
import { defineContentConfig, defineCollection } from '@nuxt/content'
import { z } from 'zod'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/**/*.md',
      schema: z.object({
        title: z.string(),
        description: z.string().optional(),
        date: z.date().optional(),
        author: z.union([
          z.string(),
          z.object({
            name: z.string(),
            avatar: z.string().optional(),
            title: z.string().optional(),
            bio: z.string().optional(),
          }),
        ]).optional(),
        image: z.string().optional(),
        category: z.string().optional(),
        tags: z.array(z.string()).optional(),
        published: z.boolean().default(true),
        readingTime: z.number().optional(),
      }),
    }),
  },
})

Quick Start

<template>
  <div>
    <XMarkLayoutNavbar
      :links="navLinks"
      :logo="{ src: '/logo.svg', srcDark: '/logo-dark.svg', alt: 'Acme' }"
      :buttons="[
        { label: 'Sign In', to: '/login', variant: 'ghost' },
        { label: 'Get Started', to: '/signup', color: 'primary' },
      ]"
    />

    <XMarkHero
      eyebrow="Welcome"
      title="Build something amazing"
      subtitle="The modern platform for teams."
      :buttons="[{ label: 'Get Started', color: 'primary' }, { label: 'Watch Demo', variant: 'outline' }]"
    />

    <XMarkSection bg="subtle" padding="xl">
      <XMarkFeatures :features="features" layout="grid" :columns="3" />
    </XMarkSection>

    <XMarkSection bg="default" padding="xl">
      <XMarkPricingPlans :plans="pricingPlans" :has-billing-toggle="true" />
    </XMarkSection>

    <XMarkLayoutFooter
      :logo="{ src: '/logo.svg', alt: 'Acme' }"
      description="Building the future of modern software."
      :social="socialLinks"
      :columns="footerColumns"
    />
  </div>
</template>

Components

All components are auto-imported with the XMark prefix. Most components work out of the box with zero required props.

Core Layout

XMarkLayoutNavbar props: links, logo ({ src, srcDark?, alt? }), buttons, transparent (default true), scrollThreshold (default 100).

XMarkSection props: bg (string variant or full object { variant, color, image, imageAlt, imageOverlay, imagePosition, pattern, patternOpacity, parallax, parallaxSpeed }), padding (none/xs/sm/md/lg/xl), container (sm–xl/full/none).

Hero & Landing

XMarkHero props: img ({ src, alt? }), video ({ src, poster? }), eyebrow, title, subtitle, buttons ([{ label, to?, color?, variant?, icon? }]), align (left/center/right), verticalAlign (center/bottom), overlay (light/heavy/gradient/none), hasScrollIndicator (default true), includeNavPadding (default false).

<XMarkHero
  image-src="/hero.jpg"
  eyebrow="Welcome"
  title="Build something amazing"
  subtitle="The modern platform for teams."
  align="left"
  overlay="gradient"
  :show-scroll-indicator="true"
>
  <template #actions>
    <UButton size="xl" color="white">Get Started</UButton>
  </template>
</XMarkHero>

Content Sections

XMarkPricingPlans props: plans, highlighted, hasBillingToggle (default false), yearlyDiscount (default 10), scale, compact (default true), variant, badges, badgesPosition (top/bottom), badgesAlign (left/center/right). Emits: select.

XMarkPricingComparison props: plans, featureGroups, caption, badges, badgesPosition (top/bottom), badgesAlign (left/center/right). Emits: select.

Blog Components

UI Elements

Modals & Overlays

Privacy & Cookie Consent

Social Proof

Directory Listings

For directory / listing / review sites.

Affiliate & Review Components

For affiliate marketing, product review sites, and comparison posts.

XMarkAffiliateProductCard props: product ({ name, image, price, originalPrice, rating, reviewCount, pros, cons, affiliateUrl, affiliateTag, badge }), layout, showPros, showCons, showRating, showPrice, buttonLabel, buttonIcon, disclosure.

Utilities

App Shell (X-branded)

App-shell components for X Enterprises products. They come in two flavours that are functionally identical:

• X-prefixed (X/... path) — historical app-shell naming.
• XX-prefixed (X/X/... path) — canonical X-branded contract; preferred for new X-products.

All components are config-driven via appConfig.xMarketing.{header, footer} unless otherwise noted.

Pick one to avoid duplication: the XX variant is the canonical X-branded choice. Use the X variant only if you're already on the X-prefixed app-shell contract. Use XMarkLayoutNavbar / XMarkLayoutFooter for non-branded (white-label) footers/headers.

Archived (Legacy)

These 11 components ship in the published NPM tarball (@xenterprises/nuxt-x-marketing@1.2.3) but are not auto-imported by Nuxt because their source paths begin with _archive/. Each one is a predecessor of (or alternative to) an actively-recommended component listed above. They are documented for visibility and for legacy consumers who already import them explicitly.

To use any archived component: import it explicitly from its full path — for example:

import XMarkHexBg from '@xenterprises/nuxt-x-marketing/app/components/X/Mark/_archive/Pattern/HexBg.vue'

See individual component docs (58.hex-bg.md through 68.newsletter-form.md) for full prop tables and the exact replacement rationale for each.

Composables

All composables are SSR-safe and auto-imported.

// Scroll animations are initialized globally by marketing.client.ts plugin.
// Use directly in components for fine-grained control:
const { elementRef } = useElementParallax(0.3);

Configuration

// app.config.ts
export default defineAppConfig({
  xMarketing: {
    // Drive shell SEO: title template "<page> | <name>", og:site_name,
    // and og:url on the shipped home page. Leave undefined for bare titles.
    name: "X Enterprises",
    url: "https://x-enterprises.com",
    config: {
      markerProjectId: "", // Optional: Marker.io project ID for feedback widget
      emailMarketingNewsletters: {
        organizationId: "", // Optional: email-marketing org ID
      },
    },
    header: {
      logo: { src: "", srcDark: "", alt: "" },
      nav: { links: [], buttons: [] },
    },
    footer: {
      logo: { src: "", alt: "" },
      body: "",
      bg: { color: "", img: { src: "", alt: "" } },
      socials: [],
      columns: [],
    },
    blog: {
      active: true,
      title: "Blog",
      description: "...",
      meta: { title: "Blog", description: "..." },
    },
  },
});

CSS Design System

The layer ships x-marketing.css with utility classes auto-available in all components.

Typography

Scroll Animations

All animations respect prefers-reduced-motion: reduce.

Hover Effects

Glass & Glow

Environment Variables

No environment variables are required — the layer's runtimeConfig.public is empty. All configuration is via app/app.config.ts under the xMarketing namespace, and blog posts are markdown under content/blog/ via Nuxt Content.

Removed (2026-07): NUXT_PUBLIC_API_URL and NUXT_PUBLIC_BUILDERIO_KEY are no longer read — the blog moved from Builder.io to Nuxt Content.

How It Works

1. Component registration: All components in app/components/X/Mark/ are auto-imported with the XMark prefix (e.g. XMark/CTA/index.vue → XMarkCTA, XMark/Button/BackToTop.vue → XMarkButtonBackToTop). App-shell components live under app/components/X/ with the X prefix (e.g. XFooter, XHeaderNav). The X Enterprises branded app-shell equivalents live under app/components/X/X/ with the XX prefix.
2. Design system: app/assets/css/x-marketing.css defines CSS custom properties for typography scale, spacing, colors, shadows, and motion. Uses Tailwind CSS v4 with @theme static for custom color palettes. Dark mode via .dark selector.
3. Animations: A client-side plugin (marketing.client.ts) auto-initializes useScrollReveal() and useParallax() globally on mount. Components can also call these composables directly for fine-grained control.
4. Configuration: app.config.ts defines the xMarketing namespace with Nuxt UI theme overrides. Consumer apps deep-merge their own app.config.ts to customize.
5. Type system: app/types/marketing.d.ts exports interfaces for all data structures (BlogPost, Feature, PricingPlan, Testimonial, AffiliateProduct, etc.).

Testing

The layer ships three distinct test suites (run inside the layer package, e.g. for contributors — consumers don't run them):

npm test runs test:unit && test:e2e (unit + smoke gate). test:e2e:ui / test:e2e:headed open the smoke suite in Playwright UI / headed mode.

Layer Architecture

Consumer apps can override app.vue to replace the default shell, or override any page by creating their own pages/blog/index.vue.

AI Context

package: "@xenterprises/nuxt-x-marketing"
type: nuxt-layer
prefixes: [XMark, X, XX]
components: 68
active: 57
archived: 11
use-when: >
  Building a marketing website with Nuxt 4. Provides 57 actively-recommended
  components across `XMark*` (hero, features, pricing, testimonials, blog,
  directory, affiliate, cookie/GDPR, modals), `X*` (app-shell
  header/footer/legal), and `XX*` (X-branded contract-equivalent app shell),
  plus 11 archived legacy components that ship in the published tarball but
  are not auto-imported (their source paths begin with `_archive/`).
  Zero required props on most, dark mode, WCAG 2.0 AA accessibility, and a
  full CSS design system. Includes 6 composables (useScrollReveal, useParallax,
  useElementParallax, useStaggerReveal, useXBlog, useConsentTracking) and
  default pages (index, /blog, /blog/[...slug]). Configure via app.config.ts
  under xMarketing.