Sous-solA API dans NuxtPièce 7/7Mémo

API

Le mémo des API web avec Nuxt : HTTP, méthodes et codes, appels externes, clés secrètes, CRUD, validation et sécurité.

Ce mémo résume l'essentiel des API avec Nuxt. Chaque section renvoie au chapitre qui l'explique en détail.

Requête et réponse

Élément	Exemple
Ligne de départ (requête)	`GET /api/recettes/2 HTTP/1.1`
Ligne de départ (réponse)	`HTTP/1.1 200 OK`
En-tête	`Content-Type: application/json`
Corps	`{ "id": 2, "titre": "Ratatouille" }`

Détails : Comprendre les API.

Méthodes

Méthode	Intention	Idempotente
`GET`	Lire	Oui
`POST`	Créer	Non
`PUT`	Remplacer	Oui
`PATCH`	Modifier en partie	Non
`DELETE`	Supprimer	Oui

Codes de statut

Code	Sens
200	Réussite
201	Ressource créée
204	Réussite, sans contenu
400	Requête invalide
401	Non authentifié
403	Pas le droit
404	Introuvable
429	Trop de requêtes
500	Erreur du serveur

Détails : Méthodes et codes de statut.

Appeler une API externe

const { data } = await useFetch('https://www.themealdb.com/api/json/v1/1/search.php', {
  query: { s: 'Arrabiata' },
  transform: reponse => reponse.meals ?? []
})

Besoin	Outil
Charger dans une page	`useFetch`
Clic ou formulaire	`$fetch` avec `try/catch`
Ne garder que l'utile	option `transform`
Paramètres d'adresse	option `query`

Détails : Consommer une API externe.

Cacher une clé

server/api/photos.get.ts

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig(event)
  return await $fetch('https://api.exemple-photos.test/plats', {
    headers: { Authorization: `Bearer ${config.cleExemple}` }
  })
})

Où	Règle
`runtimeConfig` hors `public`	Visible côté serveur seulement
`.env`	`NUXT_CLE_EXEMPLE=...`, jamais commité
La page	Appelle `/api/photos`, jamais le service

Détails : Cacher une clé d'API.

Écrire une API

Fichier	Requête
`server/api/recettes/index.get.ts`	`GET /api/recettes`
`server/api/recettes/index.post.ts`	`POST /api/recettes`
`server/api/recettes/[id].patch.ts`	`PATCH /api/recettes/2`
`server/api/recettes/[id].delete.ts`	`DELETE /api/recettes/2`

throw createError({ status: 404, statusText: 'Recette introuvable' })
setResponseStatus(event, 201)

Fonction	Rôle
`getRouterParam(event, 'id')`	Paramètre d'adresse
`getQuery(event)`	Paramètres de requête
`readBody(event)`	Corps envoyé

Détails : Écrire une API complète.

Sécurité

nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    '/api/**': { cors: true },
    '/api/recettes': { swr: 60 }
  }
})

Sujet	Réflexe
Entrées	Toujours valider côté serveur
Accès	Middleware : 401 sans identité, 403 sans droit
CORS	Ouvrir seulement à l'origine voulue
Cache	Jamais de données personnelles
Abus	Pagination, limitation de débit (429)

Détails : Sécurité et limites.

Sources officielles

Ensuite

Comprendre les API

Ce qu'est une API web, comment une requête HTTP et sa réponse en JSON s'échangent, et comment les observer dans ton navigateur.

Projet: Lignes de code
Niveau: Sous-sol
Appartement: API dans Nuxt
Pièce: 7/7
Plan n°: api/index