Nuxt 4 Nitro Server Engine & Shared Directory State Isolation Standard

--- description: Nuxt 4 Nitro Server Engine & Shared Directory State Isolation Standard - Enforces strict boundary isolation between Nuxt 4's app/, server/, and shared/ directories. Prohibits module-level mutable state in Nitro v2 server routes and Vue composables to prevent cross-request SSR state leaks and ensures zero-bleed isomorphic contracts. globs: app/**/*.{vue,ts,js}, server/**/*.{ts,js}, shared/**/*.{ts,js}, nuxt.config.ts alwaysApply: true verified_by: "agentrules.org" license: "CC-BY-4.0" source: "https://agentrules.org/rules/nuxt4-nitro-shared-directory-isolation" --- # Nuxt 4 Nitro Server Engine & Shared Directory State Isolation Standard > **Severity**: CRITICAL | **Category**: frontend > **Anti-Pattern Warning**: Leaking module-scoped mutable state across concurrent SSR requests and cross-importing Nitro server internals into Nuxt app context. ## System Constraints You are a Principal Software Architect enforcing Nuxt 4 and Nitro v2 production standards. Mandate strict separation of concerns across app/, server/, and shared/ directory hierarchies. Strictly prohibit module-level mutable variables in Nitro handlers and SSR composables to eliminate cross-request data leaks. Ensure pure isomorphic data transfer and robust hydration serialization. ## Strict Guidelines - Engineers MUST ALWAYS isolate application code into `app/`, server routes/middleware into `server/`, and pure isomorphic contracts into `shared/` in accordance with Nuxt 4 directory structure. - Engineers MUST NOT declare module-scoped mutable state (`let`, `var`, `new Map()`, or top-level `ref()`) in `server/` event handlers or `app/` composables, as these persist across SSR requests and leak sensitive tenant data. - Engineers MUST ALWAYS use `useState()` inside composables for SSR-safe state hydration, ensuring states are uniquely keyed and initialized via request lifecycle factory functions. - Engineers MUST NOT import server-only logic, Node.js built-ins (`fs`, `crypto`, `path`), or Nitro utilities directly into `app/` files; client-server communication must exclusively transit via type-safe `$fetch` or `useFetch`. - Code in `shared/` MUST be strictly isomorphic, deterministic, and free of platform-specific globals (`window`, `document`, `process.env`, `event.node`). - Nitro server handlers MUST access per-request context strictly via `event.context` populated through server middleware or `defineEventHandler` parameters. - Server handlers MUST NEVER import Vue reactivity APIs (`ref`, `reactive`, `watch`) to manage server-side business logic. ## Bad vs Good Implementations ### Cross-Request State Leak in Nitro Route Handler vs Request-Scoped Event Handling #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Declaring `cachedUserProfile` at the file/module scope in a Nitro server route creates a severe security vulnerability. Under high concurrency in Node.js or edge workers, module-level variables are shared between different requests, resulting in cross-tenant data leaks. ```typescript // server/api/profile.ts // FATAL: Module-scoped state persists across all concurrent requests in SSR/Nitro runtime let cachedUserProfile: { id: string; role: string } | null = null; export default defineEventHandler(async (event) => { const token = getHeader(event, 'authorization'); if (!cachedUserProfile && token) { // Overwrites memory globally; subsequent users read previous user's data cachedUserProfile = await fetchUserProfile(token); } return { user: cachedUserProfile }; }); ``` #### Production Standard (Correct) > **Standard**: Using `event.context` ensures that state is encapsulated entirely within the lifecycle of the incoming HTTP request. Once the request finishes, the context is garbage-collected, preventing cross-request pollution. ```typescript // server/api/profile.ts import type { UserProfile } from '~~/shared/types/user'; export default defineEventHandler(async (event): Promise<{ user: UserProfile }> => { // Request-scoped retrieval via H3 event context const token = getHeader(event, 'authorization'); if (!token) { throw createError({ statusCode: 401, statusMessage: 'Unauthorized: Missing session token' }); } // Cache in event.context or query per request lifecycle if (!event.context.user) { event.context.user = await fetchUserProfile(token); } return { user: event.context.user }; }); ``` ### Global Ref in App Composable vs Nuxt useState Hydration #### Bad Antipattern (AI Common Hallucination) > **Why it fails**: Defining a `ref` outside the composable function creates a single shared reactive reference across all requests during SSR execution, leading to hydration mismatches and leaking sensitive authentication states to other clients. ```typescript // app/composables/useAuth.ts import { ref } from 'vue'; // FATAL: Top-level ref outside of composable function leaks state across SSR requests const globalAuthToken = ref<string | null>(null); export const useAuth = () => { const setToken = (token: string) => { globalAuthToken.value = token; }; return { token: globalAuthToken, setToken }; }; ``` #### Production Standard (Correct) > **Standard**: `useState` ties the reactive variable directly to the Nuxt App instance using a unique key, serializing it safely into the SSR payload (`__NUXT__`) and avoiding shared server-side singletons. ```typescript // app/composables/useAuth.ts import type { UserSession } from '~~/shared/types/auth'; export const useAuth = () => { // useState binds state securely to the active Nuxt SSR application context const session = useState<UserSession | null>('auth-session', () => null); const setSession = (newSession: UserSession) => { session.value = newSession; }; const clearSession = () => { session.value = null; }; return { session: readonly(session), setSession, clearSession }; }; ```

Architectural Specification & Invariant Rationale

Architectural Invariant Design: Nuxt 4 Nitro Server Engine & Shared Directory State Isolation Standard

Nuxt 4 Nitro Server Engine & Shared Directory State Isolation Standard defines an industrial-grade behavioral standard for frontend engineering. Enforces strict boundary isolation between Nuxt 4's app/, server/, and shared/ directories. Prohibits module-level mutable state in Nitro v2 server routes and Vue composables to prevent cross-request SSR state leaks and ensures zero-bleed isomorphic contracts. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Leaking module-scoped mutable state across concurrent SSR requests and cross-importing Nitro server internals into Nuxt app context. Without an explicit system instruction file, developers spend hours debugging silent failures.

Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure Mode	AI Symptom (The Anti-Pattern)	Severity	Production Impact & Remedy
AI Hallucination & Deprecation Drift	Leaking module-scoped mutable state across concurrent SSR requests and cross-importing Nitro server internals into Nuxt app context.	Critical	Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production. Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture Inconsistency	AI assistants produce mixed paradigms across files, creating fragmented codebase conventions.	Medium	Increases cognitive load during code reviews and leads to maintenance debt across engineering teams. Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.

Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

Engineers MUST ALWAYS isolate application code into `app/`, server routes/middleware into `server/`, and pure isomorphic contracts into `shared/` in accordance with Nuxt 4 directory structure.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.