0099-nuxt-architecture

Structure a Nuxt 4 SPA by organizing logic into domain-specific directories containing queries, mutations, actions, and repositories. This creates a predictable flow from UI components to data access layers, establishing clear responsibility boundaries for your team.

The best way to organize Nuxt UI components is using a domain-driven feature structure that separates concerns. Establish a clear path from UI components to actions, mutations, repositories, and reactive queries to maintain type-safe patterns across the project.

The flow works by separating data operations into distinct layers: actions orchestrate operations, mutations handle state changes, repositories manage data access, and queries provide reactive data. This type-safe pattern prevents confusion as your Vue 3 project grows.

Yes, you can integrate Laravel Sanctum authentication and Laravel Echo real-time updates with a Nuxt UI app. The architecture targets a Nuxt 4 SPA-mode setup specifically aligned with these technology stack integration points.

You should set up a type-safe architecture when starting a new Nuxt UI app or aligning team conventions. Establishing the directory organization and responsibility boundaries before writing features prevents rework and confusion as the project grows.

This Nuxt architecture assumes SPA mode. It specifically targets a Nuxt 4 SPA-mode setup utilizing the Vue 3 Composition API, Nuxt UI with Tailwind, Laravel Sanctum for authentication, and Laravel Echo for real-time integration.