leeovery/agentic-skills/nuxt-architecture

Nuxt Architecture

Domain-driven, type-safe, composable-first architecture prioritizing separation of concerns.

Core Philosophy

[philosophy.md](references/philosophy.md) - Foundational principles, separation of concerns, when to use each pattern

Project Structure

[structure.md](references/structure.md) - Directory layout, naming conventions, file organization (admin / SaaS app shape)

[marketing-site-shape.md](references/marketing-site-shape.md) - Page-centric structure for marketing sites: what NOT to use (models, repos, features), shared/utils/ for client + server validation, client-only plugins for DOM effects, when to stay flat

Technology Stack

Standard Layout

app/
├── components/     # Vue components by type (Tables/, Forms/, Modals/)
├── composables/    # Custom Vue composables
├── constants/      # channels.ts, events.ts, permissions.ts
├── enums/          # TypeScript enums with behavior
├── features/       # Domain modules (queries/, mutations/, actions/)
├── models/         # Domain model classes
├── pages/          # File-based routing
├── repositories/   # Data access layer
├── types/          # TypeScript definitions
└── values/         # Value objects

Pattern Flow

Component → Action → Mutation → Repository → API
              ↓
         Query (reactive data fetching)

Actions orchestrate business logic. Mutations handle pure API calls. Queries provide reactive data. Repositories abstract API access.