0Pricing
Vue Academy · Lección

Rutas de servidor y endpoints de API en Nuxt

Directorio server/api/, defineEventHandler(), utilidades de H3, middleware y gestión de errores

Rutas de servidor y endpoints de API en Nuxt es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Nuxt es full-stack

Nuxt 3 incluye un motor de servidor (Nitro). El directorio server/ permite crear endpoints de API junto a las páginas, sin necesidad de un backend independiente para muchas aplicaciones.

El directorio server/api

Los archivos de server/api/ se convierten en rutas de API bajo /api. server/api/hello.ts responde en /api/hello.

server/
  api/
    hello.ts   ->  /api/hello
    posts.ts   ->  /api/posts

defineEventHandler

Cada ruta del servidor exporta un handler creado con defineEventHandler. Todo lo que devuelve se envía como respuesta y se serializa automáticamente a JSON.

// server/api/hello.ts
export default defineEventHandler((event) => {
  return { message: 'Hello from the server' }
})

Sufijos de métodos HTTP

Añada un sufijo de método al nombre del archivo para restringirlo. users.get.ts gestiona GET y users.post.ts gestiona POST. Sin sufijo, la ruta responde a cualquier método.

server/api/
  users.get.ts   ->  GET /api/users
  users.post.ts  ->  POST /api/users

Leer parámetros de consulta

Use el helper getQuery para leer la cadena de consulta de la URL desde el evento.

export default defineEventHandler((event) => {
  const query = getQuery(event)
  return { search: query.q }
})

Leer el cuerpo de la solicitud

En las solicitudes POST/PUT, readBody analiza el cuerpo JSON entrante. Es asíncrono, así que debe usar await.

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { received: body }
})

Rutas de servidor dinámicas

Los nombres de archivo entre corchetes también funcionan en el servidor. server/api/users/[id].get.ts lee el id con getRouterParam.

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  return { id }
})

Lanzar errores HTTP

Use createError para devolver respuestas de error HTTP adecuadas con un código de estado y un mensaje, en lugar de lanzar un error genérico.

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  if (!id) {
    throw createError({ statusCode: 400, statusMessage: 'Missing id' })
  }
})

El objeto de evento de H3

El argumento event procede de H3, el framework HTTP de Nitro. Contiene la solicitud y la respuesta, y es el punto de entrada de todas las funciones helper.

Establecer el estado y las cabeceras

Helpers como setResponseStatus y setHeader permiten controlar la respuesta cuando no basta con devolver un valor.

export default defineEventHandler((event) => {
  setResponseStatus(event, 201)
  setHeader(event, 'Cache-Control', 'no-cache')
  return { created: true }
})

Llamar a su API desde las páginas

Desde una página, obtenga datos de su propio endpoint con useFetch o $fetch. Durante SSR, Nuxt llama directamente al handler y evita un recorrido de ida y vuelta HTTP.

const { data } = await useFetch('/api/posts')

Comprobación rápida

Compruebe sus conocimientos sobre las rutas de servidor de Nuxt.

Resumen

Ha aprendido sobre las rutas de servidor de Nuxt:

  • Los archivos de server/api/ se convierten en endpoints de API.
  • defineEventHandler define un handler; su valor de retorno es la respuesta.
  • Los sufijos .get.ts/.post.ts limitan el método HTTP.
  • Use getQuery, readBody, getRouterParam y createError en el evento de H3.

Preguntas frecuentes

¿La lección «Rutas de servidor y endpoints de API en Nuxt» es gratis?

Sí — el texto completo de «Rutas de servidor y endpoints de API en Nuxt» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Rutas de servidor y endpoints de API en Nuxt»?

Directorio server/api/, defineEventHandler(), utilidades de H3, middleware y gestión de errores Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Rutas de servidor y endpoints de API en Nuxt»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Estructura de proyectos y enrutamiento basado en archivos en Nuxt 3
  2. Obtención de datos: useFetch y useAsyncData
  3. Rutas de servidor y endpoints de API en Nuxt
  4. Modo SSR frente a SSG y SPA
← Volver a Vue Academy