nuxt-architecture
1
总安装量
1
周安装量
#46147
全站排名
安装命令
npx skills add https://github.com/leeovery/claude-nuxt --skill nuxt-architecture
Agent 安装分布
amp
1
opencode
1
kimi-cli
1
codex
1
github-copilot
1
gemini-cli
1
Skill 文档
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.