Collections & Layers
Collections
A collection is a group of related data, similar to a database table. For example, you might have collections for products, posts, users, or orders. By convention, use plural names like products rather than product.
Layers
A layer represents a domain or module in your application. You might have a shop layer for e-commerce features, a blog layer for content management, an admin layer for user administration, or a marketing layer for campaigns and newsletters. Layers provide separation of concerns, can be reused across projects, and support independent deployment.
Domain-Driven Design with Layers
You can organize your collections by domain, grouping related functionality together. For instance, your shop layer might contain products, orders, and inventory collections, while your blog layer holds posts, authors, and comments. Each layer is self-contained and can be deployed independently.
layers/
├── shop/ # E-commerce domain
│ ├── components/
│ │ ├── products/
│ │ ├── orders/
│ │ └── inventory/
│ └── composables/
│
├── blog/ # Content domain
│ ├── components/
│ │ ├── posts/
│ │ ├── authors/
│ │ └── comments/
│ └── composables/
│
└── admin/ # Admin domain
├── components/
│ ├── users/
│ ├── roles/
│ └── permissions/
└── composables/
The Two-Layer Architecture
Nuxt Crouton separates generated code from the core library. Your generated code (forms, lists, tables) lives in your project and can be customized freely. This code uses the stable core library (composables, utilities, modal management, caching) which gets updated via npm. The key insight is that your generated code can diverge from the original templates while the core library remains consistent.
┌─────────────────────────────────────┐
│ Generated Code (Yours) │
│ - Forms, Lists, Tables │
│ - You customize freely │
│ - Lives in YOUR project │
└─────────────────────────────────────┘
↓ uses
┌─────────────────────────────────────┐
│ Core Library (Stable) │
│ - Composables, utilities │
│ - Modal management, caching │
│ - Updates via npm │
└─────────────────────────────────────┘