Modular Architecture with Nuxt Layers: Organizing B2B Features Without a Spaghetti Monolith

As a SaaS product grows, the complexity of its code tends to explode. Checkout components get mixed with authentication rules, admin screens share directories with regular user screens, and a change to the database model breaks three different screens without warning.

The Nuxt 4 answer to this dilemma is called Nuxt Layers. In Nuxfire, we use Layers to build isolated modules that can be turned on or off with a single line of configuration.

What Is a Nuxt Layer?

A Layer in Nuxt is a complete, self-contained package that can hold:

• Pages (pages/) and layouts (layouts/).
• Accessible Vue components (components/).
• Server routes and tRPC procedures (server/).
• Drizzle ORM schema slices (schema.ts).

This means the Billing feature, for example, lives entirely inside layers/billing/.

layers/
├── admin/          # Platform admin panel, MFA and audit logs
├── billing/        # Stripe plans, checkout, webhooks and customer portal
├── teams/          # B2B multi-tenancy, member invitations and granular RBAC
├── notifications/  # WebSocket hub with Durable Objects and SQLite history
└── kanban/         # Optional module for interactive boards and cards

The Layer Contract: @nuxfire/manifest

For each layer to be truly modular without tight coupling, every layer exports a manifest using the shared defineLayerManifest() helper:

import { defineLayerManifest } from "@nuxfire/manifest";

export default defineLayerManifest({
  name: "billing",
  description: "Stripe subscription management, webhooks and customer portal",
  dependencies: ["teams"],
  routes: ["/billing", "/billing/plans"],
  navigation: {
    title: "Subscription & Billing",
    icon: "i-lucide-credit-card",
    path: "/billing"
  }
});

Turning Modules On and Off in config.ts

Imagine you are building a lean product and you do not need the Kanban module or the complex notification system. In Nuxfire, you control the modules in the root config.ts file:

export const config = {
  domain: "yoursaas.com",
  layers: {
    core: ["teams", "billing", "notifications", "admin"],
    features: {
      kanban: false, // Turn it off easily without breaking the build
    }
  }
};

The build script inspects this file and assembles the final composition in apps/app/nuxt.config.ts 100% automatically.

Practical Benefits for Teams and Developers

1. Isolated Testability: Each layer has its own unit and integration tests.
2. Immediate Reuse: Create a new product by copying only the layers you need.
3. Ideal Context for AI: When you ask an AI (Cursor, Claude Code) to edit the checkout, it only needs to read the files inside layers/billing/, without loading thousands of irrelevant lines into memory.

Ready to transform your productivity and build on the right architecture from the start?

Get immediate access to the Nuxfire source code and the VIP Group →