Skip to content

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.

VariableEnv Variable (.env)Valor por DefectoDescripción
apiUrlNUXT_PUBLIC_API_URLhttp://localhost:8000URL base donde escucha el Backend PHP.
frontendUrlNUXT_PUBLIC_FRONTEND_URLhttp://localhost:3000URL 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 (como user o buy) guarden información en localStorage o 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,
}