Vue Academy · Aula

Rotas de servidor e endpoints de API do Nuxt

Diretório server/api/, defineEventHandler(), utilitários H3, middleware e tratamento de erros.

Rotas de servidor e endpoints de API do Nuxt é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Nuxt é uma solução completa

O Nuxt 3 inclui um mecanismo de servidor (Nitro). O diretório server/ permite criar rotas de API junto com suas páginas — para muitos aplicativos, não é necessário um back-end separado.

O diretório server/api

Os arquivos em server/api/ tornam-se rotas de API sob /api. O arquivo server/api/hello.ts responde em /api/hello.

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

defineEventHandler

Toda rota do servidor exporta um manipulador criado com defineEventHandler. O que ele retornar será enviado como resposta e serializado automaticamente para JSON.

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

Sufixos de método HTTP

Adicione um sufixo de método ao nome do arquivo para restringi-lo. users.get.ts trata GET, e users.post.ts trata POST. Sem um sufixo, a rota responde a qualquer método.

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

Lendo parâmetros de consulta

Use o auxiliar getQuery para ler a sequência de consulta da URL a partir do evento.

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

Lendo o corpo da requisição

Para requisições POST/PUT, readBody analisa o corpo JSON recebido. Como ele é assíncrono, use await.

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

Rotas dinâmicas do servidor

Nomes de arquivo entre colchetes também funcionam no servidor. server/api/users/[id].get.ts lê o id com getRouterParam.

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

Gerando erros HTTP

Use createError para retornar respostas de erro HTTP adequadas, com um código de status e uma mensagem, em vez de lançar um erro simples.

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

O objeto de evento do H3

O argumento event vem do H3, o framework HTTP do Nitro. Ele transporta a requisição e a resposta e é o ponto de entrada para todas as funções auxiliares.

Definindo status e cabeçalhos

Auxiliares como setResponseStatus e setHeader permitem controlar a resposta quando retornar um valor não é suficiente.

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

Chamando sua API a partir das páginas

A partir de uma página, busque seu próprio ponto de acesso com useFetch ou $fetch. Durante o SSR, o Nuxt chama o manipulador diretamente, ignorando uma viagem de ida e volta HTTP.

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

Verificação rápida

Teste seus conhecimentos sobre as rotas de servidor do Nuxt.

Recapitulação

Você aprendeu sobre as rotas de servidor do Nuxt:

Os arquivos em server/api/ tornam-se pontos de acesso da API.
defineEventHandler define um manipulador; o valor retornado por ele é a resposta.
Os sufixos .get.ts/.post.ts restringem o método HTTP.
Use getQuery, readBody, getRouterParam e createError no evento do H3.

Perguntas Frequentes

A aula “Rotas de servidor e endpoints de API do Nuxt” é grátis?

Sim — o texto completo de “Rotas de servidor e endpoints de API do Nuxt” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Rotas de servidor e endpoints de API do Nuxt”?

Diretório server/api/, defineEventHandler(), utilitários H3, middleware e tratamento de erros. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Rotas de servidor e endpoints de API do Nuxt”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Estrutura de projetos Nuxt 3 e roteamento baseado em arquivos
Busca de dados: useFetch e useAsyncData
Rotas de servidor e endpoints de API do Nuxt
Modo SSR vs SSG vs SPA

← Voltar para Vue Academy