0099-nuxt-architecture

Define a domain-driven, type-safe Nuxt 4 architecture for component and data access layers.

Updated Aug 23, 2026

Search Tags:#domain-driven design #laravel sanctum #repositories #nuxt ui #nuxt architecture #type-safe patterns #actions mutations queries

Ready to run

npx skills add https://github.com/MrJmpl3/codex_____data_____configuration --skill 0099-nuxt-architecture

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: 0099-nuxt-architecture
Source: https://github.com/MrJmpl3/codex_____data_____configuration/tree/main/skills/0099-nuxt-architecture
Command: npx skills add https://github.com/MrJmpl3/codex_____data_____configuration --skill 0099-nuxt-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the confusion and rework that happen when Nuxt 4 + Vue 3 projects grow without a consistent, type-safe directory and responsibility structure.

Core Features & Use Cases

Domain-driven feature organization: Organizes logic by domain using features/{domain}/ with queries/, mutations/, and actions/.
Separation of concerns with a clear layer flow: Establishes a predictable path from UI components to actions, mutations, repositories, and reactive queries.
Technology-aligned structure: Targets a Nuxt 4 SPA-mode setup with Vue 3 Composition API, Nuxt UI + Tailwind, Laravel Sanctum auth, and Laravel Echo real-time integration.

Quick Start

Use this skill to design your Nuxt project’s folder layout and layer responsibilities before writing features or integrating Nuxt UI, auth, and real-time updates.

Frequently Asked Questions about 0099-nuxt-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure a Nuxt 4 SPA project with domain-driven design?▼

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.

What is the best way to organize Nuxt UI components and data access layers?▼

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.

How does the actions, mutations, queries, and repositories flow work in Nuxt?▼

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.

Can I use Laravel Sanctum authentication and Laravel Echo with a Nuxt UI app?▼

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.

When should I set up a type-safe architecture for my Nuxt project?▼

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.

Does this Nuxt architecture assume SPA mode or server-side rendering?▼

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.