Appearance
Configuración del Frontend (Nuxt)
La configuración principal de la aplicación reside en el archivo nuxt.config.ts. Este archivo controla desde las variables de entorno hasta la inyección de scripts externos.
1. Variables de Entorno y Runtime Config
El proyecto utiliza runtimeConfig para gestionar valores sensibles y públicos de manera segura.
Variables Públicas
Estas variables están expuestas en el navegador y son accesibles mediante useRuntimeConfig().public.
| Variable | Env Variable (.env) | Valor por Defecto | Descripción |
|---|---|---|---|
apiUrl | NUXT_PUBLIC_API_URL | http://localhost:8000 | URL base donde escucha el Backend PHP. |
frontendUrl | NUXT_PUBLIC_FRONTEND_URL | http://localhost:3000 | URL pública de esta aplicación. |
Variables Privadas (Servidor)
Solo disponibles durante el SSR (Server Side Rendering) o en la API interna de Nuxt.
apiSecret: Se usa para claves internas (process.env.API_SECRET).
2. Módulos y Plugins
El proyecto integra módulos oficiales para la gestión de estado y persistencia:
@pinia/nuxt: Sistema de gestión de estado reactivo.pinia-plugin-persistedstate/nuxt: Permite que los stores (comouserobuy) guarden información enlocalStorageo cookies automáticamente, manteniendo la sesión activa tras recargar.
3. Scripts y Estilos Externos (CDN)
Para mantener la ligereza y aprovechar el caché del navegador, ciertas librerías de UI se cargan directamente desde CDNs en la cabecera (app.head):
CSS Global
- Bootstrap 5.3.2: Framework base para el diseño responsivo.
- FontAwesome 6.4.0: Iconografía.
- Select2 (Core & Bootstrap Theme): Estilos para selectores avanzados.
JavaScript Global
- jQuery 3.7.1: Requerido como dependencia para Select2.
- Bootstrap Bundle: Scripts interactivos de UI.
- Select2 JS: Lógica para los selectores de búsqueda.
Nota: Estos scripts se cargan con
tagPosition: 'bodyClose'para no bloquear el renderizado inicial de la página.
4. Servidor de Desarrollo
El servidor de desarrollo está configurado para escuchar en el puerto definido por el sistema o usar uno por defecto.
typescript
devServer: {
port: Number(process.env.NUXT_PORT) || 3000,
}