Nuxt: el framework full-stack para Vue

¿Qué es Nuxt?

Nuxt es el framework full-stack de código abierto construido sobre Vue.js. Vue es la biblioteca de interfaz; Nuxt añade lo que una aplicación en producción necesita alrededor: enrutamiento basado en archivos, renderizado en el servidor, generación estática, endpoints de API, herramientas de compilación y despliegue. Cumple para Vue el papel que Next.js cumple para React y SvelteKit para Svelte.

Nuxt 4 es la versión principal estable actual y se publicó el 15 de julio de 2025. Está construido sobre Vue 3, Vite y el motor de servidor Nitro, y guarda el código de la aplicación en el directorio app/ por defecto. Nitro puede generar un servidor Node.js o compilaciones para varias plataformas de alojamiento, según el preset elegido.

Cómo funciona Nuxt

Una petición llega a un servidor Nitro. Para una página, Nuxt renderiza el componente Vue a HTML en el servidor (renderizado en el servidor), lo envía, y el navegador lo convierte en una aplicación interactiva mediante la hidratación. El mismo proyecto puede además prerenderizar rutas al compilar (generación de sitios estáticos) o funcionar como aplicación de una sola página solo en el cliente, y se puede mezclar por ruta.

Estructura del proyecto

my-app/
├── app/
│   ├── pages/            # file-based routing
│   │   ├── index.vue     # /
│   │   └── blog/[slug].vue  # /blog/:slug
│   ├── components/       # auto-imported
│   ├── composables/      # auto-imported
│   ├── layouts/default.vue
│   └── app.vue
├── server/
│   └── api/posts.get.ts  # GET /api/posts
├── public/
└── nuxt.config.ts

Rutas y obtención de datos

Cada archivo .vue de pages/ se convierte en una ruta; [slug] crea un parámetro dinámico. Los datos se cargan con composables que funcionan en servidor y cliente:

<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

Rutas de API del servidor

Los archivos de server/api/ se convierten en endpoints y el método HTTP sale del nombre del archivo (posts.get.ts, posts.post.ts, [id].delete.ts). Para un backend típico no hace falta un servidor Express aparte.

// server/api/posts/[slug].get.ts
export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug');
  const post = await db.post.findUnique({ where: { slug } });
  if (!post) throw createError({ statusCode: 404, message: 'Not found' });
  return post;
});

Modos de renderizado

Nuxt renderiza en el servidor por defecto (renderizado universal). Con ssr: false renderiza solo en el navegador, o se elige por ruta con routeRules. Para un sitio totalmente estático basta nuxt generate.

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // built once, served static
    '/dashboard/**': { ssr: false },   // client-side only
    '/blog/**': { isr: 60 }            // ISR: CDN-cached where the host supports it
  }
});

Nuxt frente a Next.js y SvelteKit

Los tres cubren lo mismo, así que la decisión real suele ser la biblioteca de interfaz que el equipo ya conoce.

Errores comunes

• Usar $fetch durante el renderizado. El servidor carga, el cliente vuelve a cargar y la página parpadea o carga dos veces. Para datos del render usa useFetch o useAsyncData.
• APIs de navegador en el servidor. window y localStorage no existen en SSR; protégelas o ejecútalas en onMounted.
• Desajustes de hidratación. Valores aleatorios, fechas o texto dependiente del idioma que difieren entre servidor y cliente generan avisos y trabajo extra.
• SSR sin caché en páginas muy visitadas. Renderizar en cada petición consume CPU. Usa caché con routeRules (swr, isr) o prerenderiza lo que no cambia.

Pruebas de carga de una aplicación Nuxt

El SSR traslada el renderizado a tu servidor, así que el tráfico cuesta CPU y no solo ancho de banda. Prueba por separado las páginas renderizadas y las rutas /api, con una rampa parecida al tráfico real, y mira los percentiles en lugar de las medias. Las pruebas de carga de LoadFocus ejecutan scripts de JMeter y k6 desde más de 25 regiones en la nube; para la parte de cliente, consulta pruebas de carga de aplicaciones de una sola página.

Preguntas frecuentes sobre Nuxt

¿Nuxt 4 o Nuxt 3?

Empieza los proyectos nuevos con Nuxt 4, estable desde el 15 de julio de 2025. Las aplicaciones en Nuxt 3 pueden migrar paso a paso; los cambios principales son el directorio app/ y el comportamiento de la obtención de datos, y la guía oficial de actualización cubre ambos.

¿Nuxt o Vue a secas?

Vue a secas encaja en una aplicación de una sola página que controlas de principio a fin. Elige Nuxt si necesitas renderizado en el servidor, generación estática, páginas críticas para SEO o convenciones ya resueltas.

¿Puede Nuxt ejecutarse en Cloudflare Workers?

Sí. Nitro incluye presets de Cloudflare (cloudflare_module para Workers, cloudflare_pages para Pages), que se fijan con nitro.preset o la variable NITRO_PRESET al compilar.

¿Puedo crear un sitio estático con Nuxt?

Sí. nuxt generate prerenderiza las rutas en archivos estáticos.

¿Qué diferencia hay entre useFetch y $fetch?

useFetch está integrado en el renderizado: carga una vez en el servidor, pasa el resultado al cliente y lo guarda en caché. $fetch es una llamada simple sin ese tratamiento.

¿Admite Nuxt TypeScript?

Sí, con tipos generados para rutas y APIs del servidor.