Talently
Talently
Nuxt

Nuxt

El framework Vue para aplicaciones web de producción

Nuxt es un framework de Vue.js que extiende sus capacidades con renderizado en servidor, generación estática, routing automático basado en sistema de archivos, auto-imports y una arquitectura full-stack con server routes. Es la solución preferida para construir aplicaciones Vue listas para producción con rendimiento, SEO y una experiencia de desarrollo optimizada.

Vue.jsTypeScriptSSRSSG

Demanda del mercado

Nuxt es el framework Vue más adoptado para proyectos en producción. Tiene alta demanda en empresas que trabajan con Vue.js y necesitan SSR, SEO o una estructura de proyecto más opinionada que Vue puro.

Framework Vue más usado en producciónAlta demanda en proyectos Vue con SEOCrecimiento acelerado con Nuxt 3

Requisitos técnicos

Intermediate

Requiere dominio sólido de Vue 3 con Composition API, TypeScript y conceptos de renderizado web. Familiaridad con el sistema de reactividad de Vue, Pinia y conceptos de SSR es esencial para trabajar eficientemente en proyectos Nuxt reales.

Casos de uso

Proyectos Reales

Nuxt se utiliza para desarrollar:

  • Aplicaciones web con requisitos de SEO y rendimiento
  • Sitios de contenido con generación estática usando Nuxt Content
  • Aplicaciones full-stack con server routes integradas
  • Plataformas Vue que requieren SSR para carga inicial óptima

Tipos de Empresa

Nuxt es adoptado por:

  • Startups con stack Vue.js orientadas al consumidor
  • Agencias digitales con proyectos Vue en producción
  • Empresas de contenido digital y medios
  • Compañías que migran aplicaciones Vue SPA a SSR

Escenarios de Producción

Nuxt es ampliamente utilizado en entornos productivos como:

  • Sitios de marketing y landing pages con SSG
  • Aplicaciones con contenido dinámico y SEO crítico
  • Plataformas full-stack con backend en server routes
  • Blogs y sitios de documentación con Nuxt Content

Escalabilidad

Nuxt ofrece múltiples mecanismos para escalar aplicaciones:

  • Hybrid rendering con estrategias por ruta
  • Edge rendering con compatibilidad Nitro
  • Image optimization con el módulo @nuxt/image
  • Generación estática incremental para sitios de gran volumen

Ventajas y Desventajas

Ventajas

Auto-imports de componentes, composables y utilidades que reducen el boilerplate.

Motor Nitro que permite desplegar en múltiples plataformas incluyendo edge computing.

Ecosistema de módulos oficiales y de la comunidad que acelera el desarrollo.

Desventajas

La magia de los auto-imports puede dificultar el debugging para developers nuevos.

Menor adopción y ecosistema que Next.js a nivel global.

La migración de Nuxt 2 a Nuxt 3 tiene una curva significativa por los cambios de arquitectura.

Comparación

Ventajas de Next.js

  • Mayor adopción y ecosistema más grande
  • React Server Components más maduros
  • Mayor demanda laboral global

Consideraciones

Next.js y Nuxt son equivalentes en filosofía pero para React y Vue respectivamente. La elección depende principalmente del framework base del equipo. Next.js tiene mayor adopción global mientras Nuxt tiene mejor integración con el ecosistema Vue.

Preguntas básicas

Nuxt añade SSR y SSG sobre Vue mejorando el SEO y el rendimiento de carga inicial críticos en aplicaciones orientadas al consumidor. También provee routing automático, auto-imports, server routes y módulos oficiales que reducen la configuración del stack.
SSR genera la página en cada request en el servidor para contenido dinámico y personalizado. SSG genera páginas en build time para máximo rendimiento. El hybrid rendering de Nuxt permite configurar la estrategia por ruta, usando SSR para algunas páginas y SSG para otras en la misma aplicación.
Eliminan la necesidad de importar manualmente componentes, composables de Vue, utilidades de Nuxt y composables propios del proyecto. Reducen el boilerplate significativamente. La contrapartida es que las dependencias son implícitas, lo que puede dificultar entender de dónde viene cada utilidad para developers nuevos.
Nitro es el motor de servidor de Nuxt que genera un servidor universal compatible con múltiples plataformas de despliegue como Node.js, Vercel, Netlify, Cloudflare Workers y más. Permite desplegar la misma aplicación en distintos entornos sin cambiar el código.
Para lógica backend ligera como webhooks, endpoints de autenticación, proxies hacia APIs externas o lógica de negocio simple que no justifica un servicio separado. Para lógica compleja con múltiples dominios o equipos backend independientes, un servidor dedicado es más adecuado.
Nuxt genera automáticamente las rutas basándose en la estructura de archivos en la carpeta pages. Elimina la configuración manual de Vue Router, soporta rutas dinámicas con corchetes, rutas anidadas con carpetas y grupos de rutas, manteniendo la configuración implícita en la estructura de carpetas.
Es un módulo oficial que permite gestionar contenido en archivos Markdown, YAML o JSON con una API de queries intuitiva. Es ideal para blogs, documentación técnica, sitios de marketing con contenido editorial o cualquier proyecto donde el contenido se gestiona en archivos junto al código.
En proyectos Vue donde el SEO es crítico, cuando se quiere un stack full-stack unificado en Vue sin mantener un backend separado, o cuando el equipo ya trabaja con Vue y quiere añadir SSR sin cambiar de framework ni aprender React para usar Next.js.

Preguntas técnicas

Los composables de Nuxt son equivalentes a los de Vue 3 pero con acceso a utilidades del framework como useRoute, useFetch o useRuntimeConfig. Nuxt los auto-importa desde la carpeta composables del proyecto, permitiendo organizarlos sin configuración adicional y acceder al contexto de Nuxt desde cualquier composable.
useFetch es un wrapper conveniente sobre useAsyncData que acepta directamente una URL y opciones de fetch. useAsyncData es más flexible y acepta cualquier función asíncrona como fuente de datos. Ambos gestionan SSR, caché del lado del cliente y estados de carga y error de forma automática.
Con el módulo @nuxtjs/auth-next o nuxt-auth-utils para gestión de sesiones, o implementando autenticación personalizada con server routes para el backend y middleware de Nuxt para proteger rutas. La sesión puede verificarse en el middleware del servidor antes de renderizar la página.
Nuxt soporta middleware de ruta que se ejecuta antes de navegar a una página, middleware global que aplica a todas las rutas y server middleware que se ejecuta en el servidor para cada request. Se usan para autenticación, redirecciones, logging o cualquier lógica transversal por ruta.
Con Pinia que Nuxt integra y hidrata automáticamente entre servidor y cliente. Es importante no usar variables de módulo para estado global en SSR ya que se comparten entre requests. useState de Nuxt es una alternativa para estado simple que garantiza la hidratación correcta entre servidor y cliente.
Usando el módulo @nuxt/image para optimización automática de imágenes, lazy loading de componentes con defineAsyncComponent, configurando correctamente el caché de useFetch, activando la compresión en Nitro y analizando el bundle con el módulo nuxt-bundle-analyzer.
Los plugins de Nuxt se ejecutan al inicializar la aplicación y son el lugar correcto para registrar librerías globales, directivas de Vue personalizadas o proveer utilidades al contexto de la aplicación. Se organizan en la carpeta plugins y Nuxt los auto-importa según su nombre y sufijo de entorno.
Con runtimeConfig de Nuxt donde las variables en la clave public están disponibles en cliente y servidor, y las variables en la raíz solo en el servidor. Los valores se sobreescriben con variables de entorno en producción usando el prefijo NUXT_PUBLIC_ para variables públicas.

Preguntas avanzadas

Usando la feature de layers de Nuxt para organizar el código en capas independientes por dominio, con cada layer conteniendo sus propias páginas, componentes, composables y server routes. Las layers se componen en la aplicación principal, permitiendo equipos independientes trabajar en dominios separados.
Los Layers permiten extender una aplicación Nuxt con configuración, páginas, componentes y lógica de otra fuente, ya sea local o un paquete npm. Aportan valor cuando se necesita compartir funcionalidad entre múltiples aplicaciones Nuxt, crear temas reutilizables o estructurar proyectos grandes en dominios independientes.
Configurando el caché de useFetch con opciones de revalidación por tiempo, usando routeRules en nuxt.config.ts para definir estrategias de caché por ruta, implementando caché en las server routes con el helper de caché de Nitro y usando headers de caché HTTP para respuestas cacheables en el CDN.
Configurando el preset de Nitro correspondiente en nuxt.config.ts que genera un bundle compatible con el Edge Runtime. Se deben evitar APIs exclusivas de Node.js en el código de servidor, usar las APIs web estándar disponibles en el edge y verificar la compatibilidad de los módulos de Nuxt con el entorno de despliegue.
Con el módulo @nuxtjs/i18n que integra vue-i18n con el routing de Nuxt, generando automáticamente rutas por idioma, gestionando la detección de locale desde el navegador y la cookie, y optimizando la carga de traducciones con lazy loading de los archivos de mensajes por idioma.
Usando el módulo @nuxt/devtools para desarrollo, integrando Sentry con el módulo oficial para error tracking, configurando logging estructurado en las server routes con el logger de Nitro, implementando métricas de Web Vitals y usando herramientas de APM compatibles con Nitro para trazas del servidor.

Errores comunes en entrevistas

Proponer Nuxt para una aplicación interna sin requisitos de SEO o rendimiento de carga inicial refleja falta de criterio. Se espera poder articular qué aporta Nuxt específicamente y cuándo Vue puro sería suficiente.
Usar variables de módulo para estado compartido en SSR genera contaminación entre requests de distintos usuarios. No entender cómo Nuxt hidrata el estado de Pinia entre servidor y cliente es un error frecuente al migrar de Vue SPA a Nuxt.
Usar siempre useFetch sin conocer useAsyncData para casos donde la fuente de datos no es una URL directa refleja comprensión limitada del sistema de fetching de Nuxt y puede llevar a código menos flexible.
Importar manualmente ref, computed o componentes que Nuxt auto-importa genera código más verboso innecesariamente. No conocer qué auto-importa Nuxt refleja no haber leído la documentación o trabajado suficientemente con el framework.
Desconocer que Nuxt puede desplegarse en múltiples plataformas más allá de un servidor Node.js tradicional refleja comprensión limitada de la arquitectura de Nuxt 3. En entrevistas se espera conocer las opciones de despliegue que ofrece Nitro.
No poder articular las diferencias reales entre Nuxt y Next.js más allá de que uno usa Vue y el otro React refleja falta de profundidad en el conocimiento del ecosistema. Se espera conocer las diferencias en filosofía, auto-imports, Layers y el motor Nitro.