- Create app/assets/css/main.css with required imports - Configure nuxt.config.ts to load main.css - Fix missing CSS styling issue - Following Nuxt UI v4 setup documentation
Plantilla Nuxt + Authentik Proxy
Plantilla base para aplicaciones Nuxt 4 con autenticación mediante Authentik Proxy Outpost.
Estructura del Proyecto
.
├── nuxt4/ # Aplicación Nuxt 4
├── docker-compose.yml # Configuración de despliegue
└── .gitea/ # Gitea Actions CI/CD
Características
- ✅ Nuxt 4
- ✅ Autenticación con Authentik Proxy Outpost
- ✅ Docker y Docker Compose
- ✅ CI/CD con Gitea Actions
- ✅ Traefik para proxy reverso y SSL
- ✅ Claude Code hooks para monitoreo de Actions
- ✅ Sin configuración OAuth necesaria (todo manejado por el proxy)
Desarrollo Local
cd nuxt4
npm install
npm run dev
Claude Code Hooks
Este proyecto incluye hooks de Claude Code para monitorear automáticamente las Gitea Actions.
Configuración Rápida:
-
Crear token de Gitea:
- Ve a tu instancia de Gitea → Settings → Applications
- Genera un token con permisos
repo
-
Configurar token:
echo "export GITEA_TOKEN='tu_token_aqui'" >> ~/.bashrc source ~/.bashrc -
Listo! Cuando Claude Code haga
git push, automáticamente:- Monitoreará la Gitea Action
- Te notificará cuando termine con información detallada
- Te mostrará un link directo a los logs
📖 Ver documentación completa en .claude/hooks/README.md
Despliegue
El proyecto incluye Gitea Actions que automáticamente:
- Construye la imagen Docker
- La sube al registro
- Despliega usando docker-compose
Variables Requeridas en Gitea
Para configurar el despliegue automático, ve a tu repositorio en Gitea:
- Secrets:
Settings > Actions > Secrets - Variables:
Settings > Actions > Variables
Secrets (valores sensibles):
REGISTRY_USERNAME- Usuario del registro DockerREGISTRY_PASSWORD- Contraseña del registro Docker
Variables (valores públicos):
REGISTRY_URL- URL del registro Docker (ej:gitea.nucleoriofrio.com)- El owner del repositorio se agrega automáticamente
- Imagen final:
REGISTRY_URL/owner/APP_NAME:latest
APP_NAME- Nombre de la aplicación (ej:mi-app) - usado para container, imagen y TraefikAPP_DOMAIN- Dominio de la aplicación (ej:miapp.ejemplo.com)NUXT_PUBLIC_APP_URL- URL pública de la app (ej:https://miapp.ejemplo.com)
📄 Ver ejemplo completo en .env.example
Configuración de Authentik Proxy Outpost
Esta plantilla requiere un Authentik Proxy Outpost ya configurado en Traefik.
Requisitos previos:
- Red
traefik-networkcreada y Traefik corriendo en ella - Authentik Forward Auth middleware configurado en Traefik (ej: en
dynamic/middlewares.yml) - Proxy Provider de tipo Forward Auth en Authentik
Pasos:
-
En Authentik:
- Crea una aplicación para tu dominio
- Crea/usa un Proxy Provider de tipo Forward auth (single application)
- Asocia la aplicación al Outpost
-
Redes requeridas:
principal- Red de tu infraestructuratraefik-network- Red donde corre Traefik
-
Middleware en Traefik:
- El
docker-compose.ymlusaauthentik-forward-auth@file - Verifica que este middleware esté definido en tu configuración de Traefik
- Si tu middleware tiene otro nombre, actualiza el
docker-compose.yml
- El
-
Headers disponibles en la app:
X-authentik-username: nombre de usuarioX-authentik-email: email del usuarioX-authentik-name: nombre completoX-authentik-groups: grupos (separados por|)X-authentik-uid: ID único
Tu aplicación Nuxt puede leer estos headers para obtener información del usuario autenticado.
Licencia
MIT