Nuxt

Qu’est-ce que Nuxt ?

Nuxt est le meta-framework de Vue. Là où Vue vous apporte les composants et la réactivité, Nuxt ajoute tous les éléments nécessaires à une application réelle — routage, rendu serveur, récupération de données, runtime serveur et un écosystème de modules — et les assemble avec des configurations par défaut cohérentes.

C’est l’équivalent de Next.js pour Vue, et il suit la même philosophie globale : utiliser le système de fichiers pour le routage, privilégier le rendu côté serveur par défaut et faire de la récupération de données une priorité absolue. Si vous connaissez Vue, Nuxt apparaît comme une évolution naturelle plutôt que comme un nouveau framework à apprendre.

Routage basé sur les fichiers

Les fichiers situés dans pages/ deviennent des routes. Les segments dynamiques utilisent des crochets, et les dossiers imbriqués créent des routes imbriquées.

pages/
├── index.vue            # /
├── about.vue            # /about
├── blog/
│   ├── index.vue        # /blog
│   └── [slug].vue       # /blog/:slug
└── dashboard/
    ├── index.vue        # /dashboard
    └── settings.vue     # /dashboard/settings

<!-- pages/blog/[slug].vue -->
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
</script>

<template>
  <article>
    <h1>{{ post.title }}</h1>
    <div v-html="post.body" />
  </article>
</template>

useRoute vous donne la route actuelle, et NuxtLink gère la navigation côté client avec le prefetching. Les layouts dans layouts/ enveloppent les pages et vous permettent de partager une structure commune entre plusieurs routes.

Auto-imports

Nuxt importe automatiquement les API de Vue, ses propres composables, ainsi que vos composants et vos composables. Vous écrivez ainsi moins de code répétitif et vos fichiers restent concentrés sur l’essentiel.

<!-- components/UserCard.vue -->
<script setup>
const props = defineProps({ user: Object });
</script>

<template>
  <article class="card">
    <h3>{{ user.name }}</h3>
  </article>
</template>

Les composants situés dans components/ sont disponibles partout sans avoir à les importer, et vos propres composables dans composables/ sont également auto-importés. Résultat : moins de formalités et moins de listes d’imports à maintenir.

Récupération de données avec useFetch

useFetch et useAsyncData sont les méthodes recommandées pour charger des données. Elles s’exécutent lors du rendu serveur, transfèrent le résultat au client et exposent les états de chargement et d’erreur.

<!-- pages/posts.vue -->
<script setup>
const { data: posts, pending, error } = await useFetch("/api/posts");
</script>

<template>
  <p v-if="pending">Loading…</p>
  <p v-else-if="error">Could not load posts.</p>
  <PostList v-else :posts="posts" />
</template>

Comme la requête s’effectue sur le serveur, le premier affichage (first paint) inclut déjà les données. Cela évite le flash de contenu vide que l’on observe lors d’une récupération dans onMounted, et cela fonctionne avec la mise en cache, la revalidation et des clés personnalisées pour un contrôle plus précis.

Le serveur Nitro

Nuxt inclut un moteur de serveur appelé Nitro. Les fichiers dans server/api/ deviennent des points de terminaison API, et server/routes/ peut servir des gestionnaires personnalisés.

// server/api/users.get.ts
export default defineEventHandler(async () => {
  const config = useRuntimeConfig();
  return $fetch("https://api.example.com/users", {
    headers: { Authorization: config.apiKey },
  });
});

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const user = await db.user.create({ data: body });
  return { user };
});

Cela permet de garder les secrets et les identifiants tiers sur le serveur. Le client appelle votre propre point de terminaison, et Nitro s’occupe du reste. Ce même moteur se déploie sur Node, des fonctions serverless, des runtimes edge et des hébergeurs statiques via des adaptateurs.

SEO, meta et modules

Nuxt simplifie le SEO côté serveur grâce aux composables.

<!-- pages/about.vue -->
<script setup>
useSeoMeta({
  title: "About us",
  description: "Who we are and what we build.",
  ogImage: "/og/about.png",
});
</script>

Les composables useHead et useSeoMeta permettent de gérer les titres, les descriptions, les URLs canoniques et les balises sociales ; ils sont rendus correctement sur le serveur pour être parfaitement indexés par les robots de recherche. Au-delà de cela, l’écosystème de modules Nuxt permet d’ajouter l’authentification, la gestion du contenu, les images, l’analyse de données et bien plus encore, avec seulement une ou deux lignes de configuration.

Modes de rendu

Nuxt prend en charge plusieurs stratégies de rendu et vous permet de choisir celle qui convient pour chaque route :

• Universal (SSR) effectue le rendu sur le serveur et l’hydratation sur le client — c’est le mode par défaut.
• Static (SSG) pré-rend les pages lors de l’étape de build.
• SPA effectue le rendu entièrement sur le client, comme une application Vue classique.
• Hybrid mélange ces approches, permettant par exemple d’avoir des pages marketing statiques tandis qu’un tableau de bord est rendu côté client.

Vous pouvez également activer la régénération statique incrémentale et utiliser les route rules pour affiner le caching et le rendu sans avoir à restructurer votre application.

Bonnes pratiques

• Utilisez useFetch et useAsyncData plutôt que d’effectuer des appels de données dans onMounted.
• Gardez vos secrets et vos appels tiers dans des routes server/api.
• Laissez les auto-imports faire leur travail ; ne luttez pas contre eux avec des imports manuels.
• Définissez les métadonnées SEO avec useSeoMeta sur chaque page.
• Choisissez un mode de rendu par route plutôt qu’un mode unique pour l’ensemble du projet.
• Utilisez NuxtLink pour la navigation interne afin que le prefetching et les transitions fonctionnent.
• Organisez votre logique réutilisable dans des composables au sein de composables/.

Erreurs courantes

• Récupérer des données dans onMounted et perdre ainsi les bénéfices du SSR.
• Exposer des clés API en appelant des services tiers directement depuis le client.
• Utiliser un store global alors que useState ou un composable suffiraient.
• Ignorer les règles de routage et sur-rendre des pages qui pourraient être statiques.
• Supposer que les API des modules Nuxt 2 fonctionnent sans modification dans Nuxt 3.
• Négliger les métadonnées SEO car le framework rend cet oubli facile.

Et après ?

Nuxt transforme Vue en une plateforme full-stack. Approfondissez vos connaissances en Vue, ajoutez TypeScript et comparez cette approche avec Next.js et SvelteKit. Ensuite, créez une petite application comprenant une page, une server route et useFetch pour constater à quel point tous ces éléments s’assemblent naturellement.