El desarrollo full-stack con Vue.js ha experimentado una transformación significativa gracias a la integración de Nitro en Nuxt. Este motor de servidor universal permite a los desarrolladores construir aplicaciones completas, desde el frontend hasta el backend, dentro de un ecosistema unificado. En 2026, las server routes de Nuxt representan el método preferido para crear APIs robustas y de alto rendimiento.

Nitro compila automáticamente las rutas de servidor para diferentes plataformas de despliegue, ofreciendo una portabilidad excepcional entre Vercel, Cloudflare Workers, Netlify y servidores Node.js tradicionales.

Entendiendo la Arquitectura de Nitro

Nitro constituye el núcleo del sistema de servidor de Nuxt 3 y versiones posteriores. A diferencia de las soluciones tradicionales, Nitro genera código optimizado y minificado para cada entorno objetivo. Este enfoque garantiza un rendimiento óptimo independientemente de la plataforma de despliegue.

La arquitectura se basa en varios componentes fundamentales:

H3: Framework HTTP ligero y de alto rendimiento
unjs: Colección de utilidades JavaScript universales
Rollup: Bundler para la compilación del código de servidor

Creación de las Primeras Rutas de Servidor

Las rutas de servidor se definen en el directorio server/ del proyecto Nuxt. Cada archivo corresponde automáticamente a un endpoint API basado en su estructura de archivos.

server/api/users.get.tstypescript

export default defineEventHandler(async (event) => {
  const users = await $fetch('/external-api/users')
  
  return {
    success: true,
    data: users,
    timestamp: Date.now()
  }
})

La convención de nomenclatura determina el método HTTP. Un archivo users.get.ts responde a solicitudes GET, mientras que users.post.ts maneja las solicitudes POST.

server/api/users.post.tstypescript

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  
  // Validación de datos
  if (!body.email || !body.name) {
    throw createError({
      statusCode: 400,
      statusMessage: 'Email and name are required'
    })
  }
  
  // Creación del usuario
  const newUser = await createUser(body)
  
  return {
    success: true,
    data: newUser
  }
})

Manejo de Parámetros Dinámicos

Las rutas dinámicas utilizan la sintaxis de corchetes para capturar parámetros de URL. Este enfoque permite crear endpoints RESTful flexibles.

server/api/users/[id].get.tstypescript

export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  
  if (!id) {
    throw createError({
      statusCode: 400,
      statusMessage: 'User ID is required'
    })
  }
  
  const user = await fetchUserById(id)
  
  if (!user) {
    throw createError({
      statusCode: 404,
      statusMessage: 'User not found'
    })
  }
  
  return { data: user }
})

Para rutas con múltiples segmentos dinámicos, la estructura de directorios refleja la jerarquía de la API.

server/api/organizations/[orgId]/members/[memberId].tstypescript

export default defineEventHandler(async (event) => {
  const orgId = getRouterParam(event, 'orgId')
  const memberId = getRouterParam(event, 'memberId')
  
  const member = await getOrganizationMember(orgId, memberId)
  
  return { data: member }
})

Middlewares e Interceptores

Los middlewares de servidor permiten ejecutar código antes de cada solicitud. Esta funcionalidad resulta esencial para autenticación, registro de actividad y validación.

server/middleware/auth.tstypescript

export default defineEventHandler(async (event) => {
  const authHeader = getRequestHeader(event, 'authorization')
  
  if (event.path.startsWith('/api/protected')) {
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
      throw createError({
        statusCode: 401,
        statusMessage: 'Authentication required'
      })
    }
    
    const token = authHeader.split(' ')[1]
    const user = await verifyToken(token)
    
    // Adjuntar usuario al contexto
    event.context.user = user
  }
})

Utilidades de Servidor y Helpers

Nuxt proporciona numerosas utilidades para simplificar el desarrollo de rutas de servidor. Estas funciones cubren los casos de uso más comunes.

server/api/upload.post.tstypescript

export default defineEventHandler(async (event) => {
  // Lectura de formulario multipart
  const formData = await readMultipartFormData(event)
  
  if (!formData) {
    throw createError({
      statusCode: 400,
      statusMessage: 'No file uploaded'
    })
  }
  
  const file = formData.find(item => item.name === 'file')
  
  if (!file) {
    throw createError({
      statusCode: 400,
      statusMessage: 'File field is required'
    })
  }
  
  // Procesamiento del archivo
  const result = await processUpload(file)
  
  return {
    success: true,
    fileUrl: result.url
  }
})

Manejo de Cookies y Sesiones

La manipulación de cookies es directa con las utilidades integradas de Nitro.

server/api/auth/login.post.tstypescript

export default defineEventHandler(async (event) => {
  const { email, password } = await readBody(event)
  
  const user = await authenticateUser(email, password)
  
  if (!user) {
    throw createError({
      statusCode: 401,
      statusMessage: 'Invalid credentials'
    })
  }
  
  const sessionToken = generateSessionToken(user)
  
  // Establecer cookie de sesión
  setCookie(event, 'session', sessionToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 60 * 60 * 24 * 7 // 7 días
  })
  
  return {
    success: true,
    user: { id: user.id, email: user.email }
  }
})

Integración con Bases de Datos

Las rutas de servidor se integran naturalmente con ORMs y drivers de bases de datos. El siguiente ejemplo utiliza Drizzle ORM.

server/utils/db.tstypescript

import { drizzle } from 'drizzle-orm/postgres-js'
import postgres from 'postgres'
import * as schema from '~/server/database/schema'

const client = postgres(process.env.DATABASE_URL!)
export const db = drizzle(client, { schema })

server/api/posts/index.get.tstypescript

import { db } from '~/server/utils/db'
import { posts } from '~/server/database/schema'
import { desc } from 'drizzle-orm'

export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const page = Number(query.page) || 1
  const limit = Number(query.limit) || 10
  const offset = (page - 1) * limit
  
  const results = await db
    .select()
    .from(posts)
    .orderBy(desc(posts.createdAt))
    .limit(limit)
    .offset(offset)
  
  return {
    data: results,
    pagination: { page, limit }
  }
})

Caché y Rendimiento

Nitro ofrece un sistema de caché integrado para optimizar el rendimiento de las rutas de servidor.

server/api/stats.get.tstypescript

export default defineCachedEventHandler(async (event) => {
  // Esta respuesta se almacenará en caché durante 60 segundos
  const stats = await computeExpensiveStats()
  
  return { data: stats }
}, {
  maxAge: 60,
  staleMaxAge: 120,
  swr: true
})

Para un control más granular, el almacenamiento de caché puede configurarse.

nuxt.config.tstypescript

export default defineNuxtConfig({
  nitro: {
    storage: {
      cache: {
        driver: 'redis',
        url: process.env.REDIS_URL
      }
    }
  }
})

Manejo Centralizado de Errores

Un manejo de errores consistente mejora la experiencia del desarrollador y la mantenibilidad del código.

server/utils/errors.tstypescript

export class ApiError extends Error {
  statusCode: number
  
  constructor(message: string, statusCode: number = 500) {
    super(message)
    this.statusCode = statusCode
  }
}

export function handleApiError(error: unknown) {
  if (error instanceof ApiError) {
    throw createError({
      statusCode: error.statusCode,
      statusMessage: error.message
    })
  }
  
  console.error('Unexpected error:', error)
  
  throw createError({
    statusCode: 500,
    statusMessage: 'Internal server error'
  })
}

server/api/orders/[id].get.tstypescript

import { handleApiError, ApiError } from '~/server/utils/errors'

export default defineEventHandler(async (event) => {
  try {
    const id = getRouterParam(event, 'id')
    const order = await getOrder(id)
    
    if (!order) {
      throw new ApiError('Order not found', 404)
    }
    
    return { data: order }
  } catch (error) {
    handleApiError(error)
  }
})

WebSockets y Tiempo Real

Nitro soporta WebSockets para funcionalidades en tiempo real.

server/api/ws.tstypescript

export default defineWebSocketHandler({
  open(peer) {
    console.log('Client connected:', peer.id)
    peer.send(JSON.stringify({ type: 'connected', id: peer.id }))
  },
  
  message(peer, message) {
    const data = JSON.parse(message.text())
    
    // Broadcast a todos los peers conectados
    peer.publish('chat', JSON.stringify({
      from: peer.id,
      ...data
    }))
  },
  
  close(peer) {
    console.log('Client disconnected:', peer.id)
  }
})

¿Listo para aprobar tus entrevistas de Vue.js / Nuxt.js?

Practica con nuestros simuladores interactivos, flashcards y tests técnicos.

Explorar Vue.js / Nuxt.js

Despliegue Multiplataforma

Una de las ventajas principales de Nitro reside en su capacidad para apuntar a diferentes plataformas de despliegue sin modificación del código.

nuxt.config.tstypescript

export default defineNuxtConfig({
  nitro: {
    // Para Cloudflare Workers
    preset: 'cloudflare-pages',
    
    // O para Node.js standalone
    // preset: 'node-server',
    
    // O para Vercel
    // preset: 'vercel-edge'
  }
})

La portabilidad del código de servidor entre entornos edge y servidores tradicionales representa una ventaja considerable para los equipos que buscan optimizar costos y rendimiento según las necesidades del proyecto.

Conclusión

Las rutas de servidor de Nuxt impulsadas por Nitro transforman el desarrollo full-stack con Vue.js. La simplicidad para crear APIs, combinada con la potencia del sistema de caché y la portabilidad multiplataforma, la convierten en una solución de primera elección para proyectos modernos. El dominio de estos conceptos permite construir aplicaciones de alto rendimiento y fácil mantenimiento, conservando la flexibilidad necesaria para evolucionar con los requisitos del proyecto.

Nuxt Nitro y Server Routes en 2026: Vue Full-Stack y Endpoints API