Séance 7 : Nuxt & API

🎯 Objectifs

• Consommer des données dans Nuxt.

• Gérer l’authentification avec middleware.

📖 Partie théorique

Data fetching

Source : https://nuxt.com/docs/4.x/getting-started/data-fetching

Nuxt propose plusieurs helpers pour récupérer des données de façon déclarative et compatible SSR/SSG : useFetch et useAsyncData sont les plus courants. Ils sont auto‑importés et s'intègrent au cycle de rendu (server ou client) de Nuxt.

Principes clés :

• Les appels faits pendant la phase serveur sont exécutés avant l'envoi du HTML (meilleur SEO et fast first paint).

• Les helpers gèrent automatiquement l'état pending / error et la réhydratation côté client.

• Les résultats peuvent être mis en cache et revalidés (revalidation) selon la configuration.

useFetch

https://nuxt.com/docs/4.x/getting-started/data-fetching#usefetch

Exemple :

// 1) useFetch : wrapper autour de fetch/$fetch, simple et pratique
const { data, pending, error } = await useFetch('/api/tasks')

// data.value contient le JSON ; pending.value indique le chargement

useAsyncData

https://nuxt.com/docs/4.x/getting-started/data-fetching#useasyncdata

Exemple :

// 2) useAsyncData : utile pour nommer/mettre en cache explicitement
const { data: tasks } = await useAsyncData('tasks', () => $fetch('/api/tasks'))

// useAsyncData permet de définir une clé, un transform, et des options de server/lazy

Quand utiliser l'un ou l'autre

• useFetch : très pratique pour des appels simples dans le setup d'un composant/page.

• useAsyncData : préférable si vous voulez contrôler la clé de cache, le transform ou la revalidation.

Autres utilitaires liés :

• useState() : stocke un état réactif côté serveur/client (idéal pour partager une valeur entre pages sans Pinia). Exemple :

const count = useState('count', () => 0) // persisté dans l'instance Nuxt (par requête/utilisateur)

• useNuxtApp().$fetch ou $fetch : utilitaires pour faire des requêtes internes ou externes.

Server API (endpoints)

Nuxt offre un dossier server/api/ pour créer des endpoints server‑side. Exemple :

// server/api/tasks.get.js
export default defineEventHandler(async (event) => {
  // logique serveur (lecture DB, appel externe, auth)
  return [{ id: 1, title: 'Tâche' }]
})

Puis côté client :

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

Bonnes pratiques et pièges courants :

• Préférer $fetch/useFetch pour les appels internes aux endpoints Nuxt (optimisations internes).

• Faire attention aux appels indésirables côté client (watch, effets) — utiliser lazy: true si nécessaire.

• Gérer les erreurs et l'état de chargement pour afficher des loaders ou des messages clairs.

• Pour des pages statiques (SSG), vérifier si le contenu doit être revalidé (ISR-like) et configurer la revalidation via useAsyncData ou des hooks de build.

Middleware de route

source : https://nuxt.com/docs/4.x/getting-started/routing#route-middleware

• Nuxt permet de définir des middlewares pour protéger des routes (authentification, autorisation).

Ecrire le middleware dans middleware/auth.js (par exemple) :

export default defineNuxtRouteMiddleware((to, from) => {
  const isAuthenticated = useAuthStore().isAuthenticated
  if (!isAuthenticated && to.path !== '/login') {
    return navigateTo('/login')
  }
})

• Appliquer le middleware globalement dans nuxt.config.ts ou localement dans une page avec definePageMeta.

export default definePageMeta({
  middleware: 'auth'
})

Il est aussi possible d'utiliser des modules (https://nuxt.com/modules?category=Security&sortBy=stars) pour gérer l'authentification plus facilement ou de manière plus complète, en intégrant des providers OAuth, JWT, etc.

Appel API avec un token JWT

en VueJs avec fetch

const token = 'votre_token_jwt_ici';

fetch('https://wra506d.davidannebicque.ovh/api/ws-xx/channels', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
})
.then(response => response.json())
.then(data => console.log(data));

en NuxtJs avec useFetch

const token = 'votre_token_jwt_ici';

const { data, error } = await useFetch('https://wra506d.davidannebicque.ovh/api/ws-xx/channels', {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

📝 Travaux pratiques

• Reconnectér les appels API de l’application Vue 3 précédente en Nuxt.

• Créer page /login.

• Stocker token JWT dans Pinia/localStorage.

• Protéger l'ajout d'une tâche avec middleware.