Introduction à Nuxt

Ce que tu vas apprendre

• Ce que Nuxt ajoute à Vue, et pourquoi.
• Quand Nuxt est un bon choix, et quand il ne l'est pas.
• Comment créer et lancer ton premier projet Nuxt.

Vue, puis Nuxt

Tu connais déjà Vue : des composants, des props, de la réactivité. Vue s'occupe de l'interface. Mais un vrai site demande plus : plusieurs pages, des données à charger, parfois un petit serveur.

Avec Vue seul, tu dois assembler tout ça toi-même. Tu installes un routeur, tu le configures, tu choisis comment charger les données, tu montes un serveur à part.

Nuxt est un framework construit sur Vue. Il fait ces choix pour toi et les range dans une structure de dossiers fixe. Dans l'immeuble, c'est le toit-terrasse : d'en haut, on voit tout, et tout est relié. Ce site est d'ailleurs lui-même construit avec Nuxt 4, Nuxt UI et Nuxt Content.

Ce que Nuxt ajoute

Le routage par fichiers

Chaque fichier du dossier app/pages/ devient une page du site. Le fichier app/pages/recettes.vue répond à l'adresse /recettes. Tu n'écris aucune configuration de routes.

Le rendu serveur

Avec Vue seul, le navigateur reçoit une page presque vide, puis JavaScript la remplit. Avec Nuxt, par défaut, le serveur envoie une page HTML déjà remplie. Le texte s'affiche plus vite, et les moteurs de recherche le lisent directement. Ensuite, Vue prend le relais dans le navigateur pour rendre la page interactive.

Les routes API

Le dossier server/ accueille ton code serveur. Un fichier server/api/hello.ts répond à l'adresse /api/hello. Ton interface et ta petite API vivent dans le même projet.

Les auto-imports

Plus besoin d'écrire import { ref } from 'vue' en haut de chaque fichier. Nuxt importe pour toi les fonctions de Vue (ref, computed), ses propres fonctions (useFetch, useRoute) et tes composants.

<script setup lang="ts">
// Aucun import : ref et computed sont disponibles directement.
const personnes = ref(4)
const message = computed(() => `Recette pour ${personnes.value} personnes`)
</script>

<template>
  <p>{{ message }}</p>
</template>

Quand utiliser Nuxt

Nuxt est un bon choix si :

• ton site a plusieurs pages et des liens entre elles ;
• le référencement compte (blog, vitrine, catalogue) ;
• tu dois charger des données depuis une API ;
• tu veux une petite API dans le même projet que l'interface.

Nuxt est moins utile si :

• tu ajoutes juste un petit composant interactif dans une page existante : Vue seul suffit ;
• ton site tient en une page fixe : du HTML et du CSS suffisent ;
• tu découvres à peine Vue : apprends d'abord les composants et la réactivité, sinon tu ne sauras pas ce qui vient de Vue et ce qui vient de Nuxt.

Créer ton premier projet

Dans ce cours, tu vas construire un petit site de recettes : une liste, une page par recette, et une API qui fournit les données.

Vérifie d'abord ta version de Node. Nuxt demande Node 22 ou plus.

node -v

Crée ensuite le projet :

npm create nuxt@latest mon-site

Si l'assistant te pose des questions, garde les choix proposés par défaut. Entre ensuite dans le dossier et lance le serveur de développement :

cd mon-site
npm run dev

Ouvre http://localhost:3000 dans ton navigateur. Ta page s'affiche. Modifie un fichier, enregistre : la page se met à jour toute seule.

À retenir

• Nuxt est un framework construit sur Vue : il ajoute une structure et des choix par défaut.
• Il apporte le routage par fichiers, le rendu serveur, les routes API et les auto-imports.
• Pour un petit composant isolé, Vue seul suffit.
• npm create nuxt@latest mon-site crée un projet, npm run dev le lance sur http://localhost:3000.