Nuxt: El Framework Full-Stack Vue, Features, Deployment

¿Qué es Nuxt?

Nuxt es el framework full-stack oficial para Vue.js. Donde Vue es la librería UI, Nuxt es todo lo demás necesario para construir una app web producción: routing, server-side rendering (SSR), static site generation (SSG), endpoints API, tooling build y deployment. Es análogo a Next.js para React o SvelteKit para Svelte.

Nuxt 3 está construido sobre Vue 3, Vite y el motor servidor Nitro. Nitro deploya virtualmente en cualquier lugar — Node.js, AWS Lambda, Cloudflare Workers, Vercel, Netlify, Deno Deploy.

¿Por qué Nuxt?

• Convenciones sobre config.
• Rendering universal.
• Motor Nitro.
• Auto-imports.
• TypeScript first-class.
• Ecosistema Vue.
• Módulos Nuxt.
• Dev server Vite.

Estructura proyecto Nuxt

my-app/
├── pages/
│   ├── index.vue
│   └── blog/[slug].vue
├── components/
├── composables/
├── server/
│   └── api/posts.get.ts
├── layouts/default.vue
└── nuxt.config.ts

Routing en Nuxt

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

Routes API servidor

export default defineEventHandler(async (event) => {
  const slug = getRouterParam(event, 'slug');
  const post = await db.post.findUnique({ where: { slug } });
  if (!post) throw createError({ statusCode: 404 });
  return post;
});

Data fetching

Modos rendering

export default defineNuxtConfig({
  ssr: true,
  routeRules: {
    '/': { prerender: true },
    '/dashboard': { ssr: false },
    '/blog/**': { isr: 60 }
  }
});

Nuxt vs Next.js vs SvelteKit

Módulos Nuxt populares

Mejores prácticas Nuxt

• Usar server routes para API.
• useFetch para datos.
• routeRules para rendering híbrido.
• Auto-imports para código más limpio.
• Pinia para state global.
• SEO vía @nuxt/seo.
• Nuxt DevTools.
• TypeScript en todos lados.

FAQ: Nuxt

¿Es Nuxt 3 production-ready?

Sí.

¿Nuxt o Vue solo?

Vue solo para SPAs. Nuxt para SSR, SSG.

¿Puede Nuxt deployar a Cloudflare Workers?

Sí — Nitro auto-detecta.

¿Cómo se compara Nuxt con Next.js?

Ecosistemas diferentes.

¿Soporta Nuxt TypeScript?

First-class.

¿Diferencia entre useFetch y $fetch?

useFetch maneja SSR + cliente + caching automáticamente.

¿Puedo usar Nuxt para sitio estático?

Sí.

Load testea tu app Nuxt con LoadFocus

LoadFocus corre scripts JMeter y k6 contra tu deployment Nuxt desde 25+ regiones. Regístrate en loadfocus.com/signup.