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,
}