DevTalles

Domina Nuxt 4+ con TypeScript desde cero hasta un nivel profesional construyendo un proyecto real y completo: un sitio web público, panel administrativo, autenticación, administración de productos, carga de archivos, reseñas y despliegue a producción.

Este curso te lleva paso a paso a través del ecosistema moderno de Nuxt, reforzando las bases de Vue 3 (Composition API), profundizando en el Server Engine de Nuxt, creando APIs internas, conectando una base de datos PostgreSQL con Prisma, implementando autenticación segura y trabajando con Cloudinary para subir imágenes de forma eficiente.

Todo el proyecto se desarrolla bajo estándares profesionales utilizando TypeScript, el nuevo motor de servidor de Nuxt 4+ y NuxtUI como librería principal de componentes y diseño.

¿Qué aprenderás en este curso?

Fundamentos y flujo del curso

• Cómo usar Nuxt 4+ con TypeScript desde cero.
• Cómo funciona el proyecto, dónde hacer preguntas y cómo trabajar de forma profesional.

Reforzamiento esencial de Vue 3

• Componentes, props, estado y eventos.
• Directivas v-if, v-for y patrones de reactividad.
• Composables personalizados y ciclo de vida.
• Peticiones HTTP, useFetch, genéricos y caché.

Nuxt – Primeros pasos y conceptos clave

• SSR, SSG, SPA y cómo Nuxt gestiona cada modo.
• Estructura de directorios y páginas basadas en archivos.
• Navegación con NuxtLink, layouts, SEO y metatags.
• Despliegue básico de aplicaciones Nuxt.

NuxtUI – Estructuras y componentes

• Instalación, configuración y uso profesional de NuxtUI.
• Creación del sitio público, pantallas de login y dashboard.
• Bases del diseño con NuxtUI, layouts, iconos e integración visual.
• Construcción de páginas de productos y panel administrativo.

Server API con PostgreSQL + Prisma

• Crear server endpoints en Nuxt.
• Conectar Prisma con PostgreSQL/NeonTech.
• Modelos, seeds, relaciones y consultas.
• CRUD de reseñas y productos desde la base de datos.

Paginación avanzada y consumo de APIs

• Endpoints con parámetros de query.
• Composables personalizados para productos.
• Paginación reactiva y tablas con TanStack Table.
• useFetch, useLazyFetch y componentes perezosos.

Autenticación y autorización

• Hash de contraseñas y creación de usuarios.
• Server endpoints seguros para login.
• Cookies de sesión seguras.
• Middlewares de rutas y reglas de acceso.
• Composable useAuthentication.

Administración de productos

• Validación de sesión en APIs.
• Middlewares en el Server Engine.
• Creación/edición de productos desde el panel admin.
• Manejo de formularios, validaciones y actualizaciones.

Carga de archivos con Cloudinary

• Preparación del almacenamiento.
• Recepción, validación y envío de archivos.
• Limpieza, vistas previas locales y manejo con Cloudinary.

Maestro–Detalle: Reseñas

• Relación uno a muchos entre productos y reseñas.
• Server endpoints para reseñas.
• Modal de reseñas, hidratación y solución de errores.
• Crear reseñas autenticadas desde el cliente.

Despliegue a producción

• Vista previa de producción.
• Subir proyecto a GitHub.
• Despliegue profesional en Vercel.
• Configuración avanzada de SEO con useSeoMeta.

🛠️ ¡Olvídate de las configuraciones manuales complejas y domina el framework definitivo para crear aplicaciones fullstack con Vue 3!