nuxt-architecture
Foundational architecture for Nuxt 4 + Vue 3 + Nuxt UI applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection.
When & Why to Use This Skill
This Claude skill provides a comprehensive architectural blueprint for building modern web applications using Nuxt 4, Vue 3, and Nuxt UI. It establishes a domain-driven, type-safe, and composable-first foundation, ensuring a clean separation of concerns and scalable project organization for professional frontend development.
Use Cases
- New Project Scaffolding: Use this skill to instantly set up a standardized directory structure and technology stack when starting a new Nuxt 4 or Vue 3 project.
- Architectural Decision Making: Consult this skill to determine the best practices for directory organization, naming conventions, and pattern selection to maintain long-term code quality.
- Implementing Domain-Driven Design (DDD): Apply the provided feature-based and repository-based patterns to decouple business logic from UI components.
- Standardizing Data Flow: Establish a consistent 'Component → Action → Mutation → Repository' flow to streamline API interactions and state management across large teams.
- Full-stack Integration Planning: Leverage pre-defined patterns for integrating Laravel Sanctum for authentication and Laravel Echo for real-time features within a Nuxt environment.
| name | nuxt-architecture |
|---|---|
| description | Foundational architecture for Nuxt 4 + Vue 3 + Nuxt UI applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection. |
Nuxt Architecture
Domain-driven, type-safe, composable-first architecture prioritizing separation of concerns.
Core Philosophy
philosophy.md - Foundational principles, separation of concerns, when to use each pattern
Project Structure
structure.md - Directory layout, naming conventions, file organization
Technology Stack
| Layer | Technology |
|---|---|
| Framework | Nuxt 4 (SPA mode, SSR disabled) |
| UI | Vue 3 Composition API |
| Components | Nuxt UI v4 + Tailwind CSS 4 |
| State | Composables with ref/useState |
| HTTP | Custom fetch via Sanctum/ofetch |
| Auth | Laravel Sanctum (nuxt-auth-sanctum) |
| Real-time | Laravel Echo (nuxt-laravel-echo) |
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.