Arquitectura Modular con Nuxt Layers: Organizando Funciones B2B sin Monolitos Espagueti

A medida que un producto SaaS crece, la complejidad del código tiende a explotar. Los componentes de checkout se mezclan con las reglas de autenticación, las pantallas de administración comparten directorios con las de los usuarios comunes y un cambio en el modelo de base de datos rompe tres pantallas distintas sin previo aviso.

La solución de Nuxt 4 para este dilema se llama Nuxt Layers. En Nuxfire, usamos Layers para construir módulos aislados que se pueden activar o desactivar con una sola línea de configuración.

¿Qué es una Nuxt Layer?

Una Layer en Nuxt es un paquete completo y autónomo que puede contener:

• Páginas (pages/) y layouts (layouts/).
• Componentes Vue accesibles (components/).
• Rutas de servidor y procedures tRPC (server/).
• Fragmentos del schema de Drizzle ORM (schema.ts).

Esto significa que la funcionalidad de Facturación (Billing), por ejemplo, existe totalmente contenida dentro de layers/billing/.

layers/
├── admin/          # Panel de administración de la plataforma, MFA y registros de auditoría
├── billing/        # Planes de Stripe, checkout, webhooks y portal del cliente
├── teams/          # Multi-tenancy B2B, invitaciones de miembros y RBAC granular
├── notifications/  # Hub de WebSockets con Durable Objects e historial en SQLite
└── kanban/         # Módulo opcional de tableros y tarjetas interactivas

El Contrato de Capas: @nuxfire/manifest

Para que cada capa sea verdaderamente modular sin un acoplamiento rígido, cada layer exporta un manifiesto mediante el helper compartido defineLayerManifest():

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

export default defineLayerManifest({
  name: "billing",
  description: "Gestión de suscripciones de Stripe, webhooks y portal de clientes",
  dependencies: ["teams"],
  routes: ["/billing", "/billing/plans"],
  navigation: {
    title: "Suscripción y Facturación",
    icon: "i-lucide-credit-card",
    path: "/billing"
  }
});

Activar y Desactivar Módulos en config.ts

Imagina que estás creando un producto ligero y no necesitas el módulo de Kanban ni el complejo sistema de notificaciones. En Nuxfire, controlas los módulos en el archivo raíz config.ts:

export const config = {
  domain: "tusaas.com",
  layers: {
    core: ["teams", "billing", "notifications", "admin"],
    features: {
      kanban: false, // Desactívalo fácilmente sin romper el build
    }
  }
};

El script de build inspecciona este archivo y arma la composición final en apps/app/nuxt.config.ts de forma 100% automática.

Beneficios Prácticos para Equipos y Desarrolladores

1. Testabilidad Aislada: Cada capa tiene sus propias pruebas unitarias y de integración.
2. Reutilización Inmediata: Crea un nuevo producto copiando solo las capas que necesitas.
3. Contexto Ideal para las IA: Cuando le pides a una IA (Cursor, Claude Code) que edite el checkout, solo necesita leer los archivos dentro de layers/billing/, sin cargar en memoria miles de líneas irrelevantes.

¿Listo para transformar tu productividad y construir con la arquitectura correcta desde el principio?

Obtén acceso inmediato al código fuente de Nuxfire y al Grupo VIP →