Estructura del Proyecto

Raíz del proyecto

verticals-subscription-ecommerce/
├── app/                    → Todo el código fuente de la aplicación
├── i18n/                   → Traducciones globales (es.json, en.json, pt-BR.json)
├── public/                 → Archivos estáticos (favicon, logos, imágenes)
├── nuxt.config.ts          → Configuración central de Nuxt
├── tailwind.config.ts      → Configuración de Tailwind CSS (colores, fuentes, breakpoints)
├── vitest.config.ts        → Configuración de tests
├── eslint.config.js        → Reglas de ESLint (flat config)
├── .prettierrc             → Configuración de formateo
├── .stylelintrc.json       → Reglas de CSS
├── commitlint.config.ts    → Validación de mensajes de commit
├── .lintstagedrc           → Qué se ejecuta en pre-commit por tipo de archivo
├── .pnpmrc                 → Configuración de pnpm (hoisted, auto-install-peers)
├── package.json            → Dependencias y scripts
└── pnpm-lock.yaml          → Lock file determinista

`app/` — Código fuente

`app/pages/` — Rutas (file-based routing)

Cada archivo .vue aquí genera una ruta automáticamente. Nuxt lee la estructura de carpetas y crea el router.

pages/
├── index.vue                → /
├── channels/
│   ├── index.vue            → /channels
│   └── [slug].vue           → /channels/:slug (dinámico)
├── courses/
│   ├── index.vue            → /courses
│   └── [slug].vue           → /courses/:slug
├── lives/
│   ├── index.vue            → /lives
│   └── [slug].vue           → /lives/:slug
├── books/                   → /books, /books/:slug
├── presentials/             → /presentials, /presentials/:slug
├── series/[slug].vue        → /series/:slug
├── account/                 → Dashboard del usuario (settings, historial, suscripción)
├── iniciar-sesion/          → Login
├── registro/                → Registro
├── recuperar-contrasena/    → Recuperar password
├── osteocom/                → Productos de terceros (Osteocom)
└── [páginas legales]        → aviso-legal, politica-privacidad, cookies

Regla: Para crear una nueva página, solo crea un archivo .vue en la carpeta correcta. No toques ningún router.

`app/components/` — Componentes Vue propios

Componentes que NO están en ecom-components. Son específicos de este proyecto.

components/
├── ui/                     → Componentes de UI reutilizables
│   ├── form/               → Inputs, selects, checkboxes custom
│   ├── buttons/            → Variantes de botones
│   ├── cards/              → Cards específicas del proyecto
│   ├── skeleton/           → Placeholders de carga
│   ├── platform/           → UI específica de la plataforma
│   └── timer/              → Componentes de temporizador
├── auth/                   → Formularios de login/registro/recovery
├── views/                  → Componentes page-level (secciones de páginas)
└── client/                 → Componentes client-only (no SSR compatible)

Nota: Los componentes AE* vienen de ecom-components y se auto-registran. Los de esta carpeta son complementarios.

`app/composables/` — Lógica reactiva reutilizable

Funciones que encapsulan lógica con estado reactivo, reutilizables en cualquier componente.

composables/
├── useServices.ts          → Punto central de acceso a datos (el más importante)
├── useShowAlert.ts         → Sistema de alertas globales
├── useBuyFlow.ts           → Flujo completo de compra
├── useCheckout.ts          → Creación de sesiones Stripe
├── useForm.ts              → Gestión genérica de formularios
├── useGlobalSearch.ts      → Búsqueda y filtrado reactivo
├── useModal.ts             → Control de visibilidad de modales
├── useLanguageChanger.ts   → Cambio de idioma global
├── useElevenLabsAgent.ts   → Widget de IA conversacional
├── useCurrentPage.ts       → Metadata de la página actual
└── [15+ más]               → Lógica específica de features

Todos se auto-importan gracias a Nuxt. Solo úsalos: const { data } = useServices('getCourses').

`app/services/` — Capa HTTP (comunicación con APIs)

Funciones que realizan llamadas HTTP al backend. Organizadas por dominio.

services/
├── fetchApi.ts             → HttpClient class (wrapper de $fetch) + ZohoClient
├── strapi/                 → Servicios de autenticación
│   ├── login.ts            → Login (JWT)
│   ├── registerUser.ts     → Registro de usuario
│   ├── forgotPassword.ts   → Solicitar reset de password
│   ├── resetPassword.ts    → Ejecutar reset con token
│   └── changePassword.ts   → Cambiar password (autenticado)
├── inspiria/               → Servicios de contenido (específicos de la vertical)
│   ├── channels.ts         → Canales de contenido
│   ├── courses.ts          → Cursos
│   ├── books.ts            → Libros digitales
│   ├── lives.ts            → Eventos en vivo
│   ├── series.ts           → Series de video
│   ├── presentials.ts      → Cursos presenciales
│   ├── protagonists.ts     → Expertos/instructores
│   └── osteocom.ts         → Productos Osteocom
└── shared/                 → Servicios compartidos entre verticales
    ├── products.ts         → Productos genéricos
    ├── checkout.ts         → Checkout Stripe
    ├── orders.ts           → Pedidos del usuario
    └── series.ts           → Series compartidas

Regla: Nunca llames httpClient desde un componente. Siempre pasa por useServices.

`app/stores/` — Estado global (Pinia)

Cada store maneja un dominio de estado de la aplicación.

stores/
├── auth.ts          → JWT, isLoggedIn, suscripciones, validateSession(), logout()
├── user.ts          → Perfil del usuario, fetchUser(), clearUser()
├── language.ts      → Idioma actual, setLanguage()
├── categories.ts    → Categorías de contenido (se refetcha al cambiar idioma)
├── orders.ts        → Productos comprados, suscripción, checkIsProductPurchased()
├── video.ts         → Config de reproducción (volumen, velocidad, posición por video)
└── addressSync.ts   → Sincronización de dirección de facturación

`app/constants/` — Valores fijos y configuración

Valores que nunca cambian en runtime. Centralizados aquí para evitar magic strings.

constants/
├── verticals/
│   └── inspiria.ts         → Configuración completa de la vertical Inspiria
├── api-structures/         → Queries de Strapi (populate, filters, sort)
│   ├── commonStructure.ts  → Queries compartidas
│   └── osteocomStructure.ts→ Queries de Osteocom
├── strapi.ts               → Constantes del CMS
├── languages.ts            → Idiomas soportados, default, flags
├── zoho.ts                 → URLs de webhooks del CRM
├── elevenlabs.ts           → Config del widget de IA
├── checkout.ts             → Constantes de checkout (URLs de retorno, etc.)
├── products.ts             → Tipos de producto, SKUs especiales
├── countriesPhone.ts       → Códigos telefónicos por país
├── resolutions.ts          → Breakpoints para lógica JS
├── colors.ts               → Mapeo de colores por vertical
├── icons.ts                → Nombres de iconos usados
├── pages.ts                → Constantes de páginas (nombres de ruta)
├── specialities.ts         → Especialidades médicas
├── subscriptionPopup.ts    → Config del popup de suscripción
├── errorConstants.ts       → Mensajes de error centralizados
├── placeholders.ts         → Imágenes placeholder
├── legalPages.ts           → Rutas de páginas legales
├── commonComponents.ts     → Config de componentes reutilizados
└── mediaContent.ts         → Constantes de media

Regla: Si escribes un string o número que tiene significado de negocio, extráelo aquí.

`app/core/` — Utilidades centrales del framework

Lógica fundamental que conecta todo el sistema multi-vertical.

core/
├── config.ts       → VERTICAL_LIST, visibleVertical (la vertical activa)
├── utils.ts        → selectVertical(), isProduction(), sendZohoForm()
├── plugins.ts      → Funciones del plugin de inicialización (favicon, SEO, colors, analytics)
└── globals/        → Auto-imports globales custom

`app/layouts/` — Wrappers visuales de páginas

Define la estructura visual que envuelve a una página (navbar, footer, sidebar, etc.).

layouts/
├── baseProductDetail.vue   → Página de detalle (contenido + sidebar)
├── gradientLayout.vue      → Fondo con gradiente de marca
├── emptyLayout.vue         → Sin navbar ni footer (auth, landing especiales)
└── pages/                  → Layouts específicos por tipo de página
    ├── account.vue         → Dashboard del usuario
    ├── login.vue           → Página de login
    ├── register.vue        → Página de registro
    ├── subscription.vue    → Página de suscripción
    └── [más...]

`app/middleware/` — Guards de navegación

Se ejecutan antes de cargar una página. Pueden redirigir o bloquear.

middleware/
├── auth.global.ts          → Protege rutas privadas, redirige si no hay sesión
├── language.global.ts      → Aplica idioma del usuario en cada navegación
├── exclusive-pages.ts      → Bloquea páginas que la vertical no tiene activas
└── is-thanks-message.ts    → Valida flujo de "página de gracias" post-compra

Los .global.ts se ejecutan en toda navegación. Los demás se asignan por página con definePageMeta.

`app/plugins/` — Código que se ejecuta al iniciar la app

plugins/
├── 01.initApp.client.ts    → Inyecta favicon, colores, analytics, SEO al arrancar
└── directives.client.ts    → Registra directivas custom (v-outside-click)

El prefijo numérico (01.) controla el orden de ejecución. .client.ts = solo en browser.

`app/locales/` — Traducciones por vertical

locales/
└── inspiria/
    ├── es/     → Traducciones en español específicas de Inspiria
    ├── en/     → Traducciones en inglés
    └── pt-BR/  → Traducciones en portugués

Estas son adicionales a las traducciones globales en /i18n/.

`app/config/` — Configuración modular

config/
├── css.ts          → Lista de archivos CSS globales importados
├── i18n.ts         → Configuración de @nuxtjs/i18n
├── i18n/           → Sub-configuración (pages.ts con traducciones de rutas)
└── webhooks.ts     → URLs de webhooks

`app/types/` y `app/interfaces/`

types/              → Tipos auxiliares simples
├── common.d.ts     → LanguageCode, AlertType, HexColor
├── services.d.ts   → FunctionService<T, U>
├── forms.d.ts      → Tipos de formularios
├── pages.d.ts      → Tipos de rutas/páginas
└── [más]

interfaces/         → Interfaces complejas (contratos de API)
├── verticals.d.ts  → Interface Verticals completa
└── api/            → Tipos de respuesta de Strapi
    ├── strapi/     → User, LoginResponse, etc.
    └── common.ts   → Strapi<T> wrapper

`app/assets/` — Archivos procesados por el build

assets/
└── styles/
    ├── fonts.css           → @font-face declarations
    ├── variables.css       → CSS custom properties del proyecto
    ├── reset.css           → CSS reset (normalize)
    ├── vueTransitions.css  → Animaciones de transición Vue
    └── components.css      → Estilos base de componentes

Estos se importan via app/config/css.ts → nuxt.config.ts.

Archivos de configuración raíz

Archivo	Propósito
`nuxt.config.ts`	SPA mode, módulos, auto-imports, route rules, vite config, manual chunks
`tailwind.config.ts`	Colores (CSS vars), tipografía responsive, content paths para purging
`vitest.config.ts`	Entorno happy-dom, aliases, cobertura
`eslint.config.js`	Flat config con reglas estrictas para Vue + TS
`.prettierrc`	Print width 120, single quotes, no semicolons, tab width 2
`.stylelintrc.json`	CSS linting, orden de propiedades, BEM
`commitlint.config.ts`	Conventional commits enforced
`.lintstagedrc`	Qué linters correr por extensión de archivo
`.pnpmrc`	`node-linker=hoisted`, `auto-install-peers=true`

Estructura del Proyecto

Raíz del proyecto

app/ — Código fuente

app/pages/ — Rutas (file-based routing)

app/components/ — Componentes Vue propios

app/composables/ — Lógica reactiva reutilizable

app/services/ — Capa HTTP (comunicación con APIs)

app/stores/ — Estado global (Pinia)

app/constants/ — Valores fijos y configuración

app/core/ — Utilidades centrales del framework

app/layouts/ — Wrappers visuales de páginas

app/middleware/ — Guards de navegación

app/plugins/ — Código que se ejecuta al iniciar la app

app/locales/ — Traducciones por vertical

app/config/ — Configuración modular

app/types/ y app/interfaces/

app/assets/ — Archivos procesados por el build