09. Modern Project Types & Directory Structures

Architect production-grade codebases across full-stack applications, static sites, component libraries, and enterprise monorepo workspace hierarchies.

project-structures.ts

// Modern Project Topologies: SvelteKit vs Nuxt 4 vs Monorepos

/* SvelteKit Directory Standard */
// src/
// ├── lib/          <- Reusable components, state, server utilities ($lib)
// │   ├── components/
// │   ├── server/   <- Server-only code ($lib/server, prevents client leak)
// │   └── state/    <- Svelte 5 runes universal stores (.svelte.ts)
// ├── routes/       <- File-based router (+page, +layout, +server, +error)
// ├── app.html      <- HTML shell template
// └── hooks.server.ts

/* Nuxt 4 Forward-Compatible Standard */
// app/
// ├── components/   <- Auto-imported Vue components
// ├── composables/  <- Auto-imported reactive state composables
// ├── pages/        <- File-based page routes
// └── layouts/
// server/
// └── api/          <- Nitro server endpoints

Modern Project Types & Directory Structures

Choosing the right project topology is fundamental to long-term maintainability, code reuse, and team velocity.

SvelteKit 2 Layout: Enforces strong server-side isolation with $lib/server and deterministic page routing with +page.server.ts and hooks.server.ts.
Nuxt 4 Structure: Centralizes frontend components and composables in app/ while isolating backend endpoints in server/api/.
Monorepo Topologies: Organizes large teams into decoupled apps/ and reusable internal packages/ linked via PNPM workspace catalogs.