Comment démarrer Nuxt.js en 2026 (guide beginner)

Introduction

Nuxt.js est le framework meta-framework basé sur Vue.js qui simplifie le développement d'applications web universelles avec rendu côté serveur (SSR), génération de sites statiques (SSG) et SPA. En 2026, Nuxt 3+ intègre Nitro pour un serveur ultra-performant, une API automatique et un support TypeScript natif, rendant le développement plus rapide et scalable.

Pourquoi l'utiliser ? Il gère le routage fichier-based, l'optimisation SEO out-of-the-box, et les déploiements sur Vercel ou Netlify en un clic. Ce tutoriel beginner vous guide pas à pas pour créer une app complète : installation, pages, composants, navigation et données fetchées. À la fin, vous aurez un projet fonctionnel, prêt à bookmarker. Idéal pour les développeurs Vue débutants voulant passer au niveau pro avec SSR. (128 mots)

Prérequis

Node.js 20+ installé
npm ou yarn (npm recommandé)
Connaissances basiques en HTML/JS (Vue.js optionnel)
Éditeur de code comme VS Code avec extension Volar

Initialiser le projet Nuxt

terminal

npx nuxi@latest init mon-app-nuxt
cd mon-app-nuxt
npm install
npm run dev

Cette commande crée un nouveau projet Nuxt 3 avec la structure app/ par défaut. Elle installe les dépendances et lance le serveur dev sur http://localhost:3000. Évitez de modifier package.json manuellement pour ne pas casser les scripts Nuxt.

Comprendre la structure générée

Le projet inclut app.vue (layout racine), pages/ pour le routage automatique, components/ pour réutilisabilité, et nuxt.config.ts pour la config. Chaque fichier .vue dans pages/ devient une route. Ouvrez http://localhost:3000 pour voir la page d'accueil par défaut.

Configurer Nuxt avec TypeScript

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/ui'],
  typescript: {
    strict: true
  },
  css: ['~/assets/css/main.css'],
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || 'https://api.example.com'
    }
  }
})

Cette config active les devtools, le module UI Nuxt, TypeScript strict et un CSS global. runtimeConfig permet des variables d'env sécurisées. Ajoutez @nuxt/ui via npm install @nuxt/ui avant de relancer npm run dev.

Créer la page d'accueil

app.vue

<template>
  <div>
    <NuxtPage />
    <UContainer>
      <h1>Bienvenue sur mon app Nuxt.js !</h1>
      <p>Cette app utilise le rendu SSR pour un SEO optimal.</p>
      <NuxtLink to="/about">Aller à About</NuxtLink>
    </UContainer>
  </div>
</template>

<script setup lang="ts">
// Composant racine avec slots automatiques
</script>

Remplacez le contenu de app.vue par ce layout global. rend les pages enfants, vient de @nuxt/ui. gère la navigation client-side sans refresh. Testez le lien après sauvegarde.

Ajouter des pages et navigation

Créez maintenant des pages routées. Dans pages/index.vue pour la home, et pages/about.vue pour /about. Nuxt auto-génère les routes.

Page d'accueil dynamique

pages/index.vue

<template>
  <div>
    <h1>Accueil</h1>
    <p>Liste de tâches :</p>
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
    </ul>
    <button @click="addTask">Ajouter tâche</button>
  </div>
</template>

<script setup lang="ts">
const tasks = ref([
  { id: 1, text: 'Apprendre Nuxt' },
  { id: 2, text: 'Développer une app' }
])

const addTask = () => {
  tasks.value.push({ id: tasks.value.length + 1, text: 'Nouvelle tâche' })
}
</script>

Cette page utilise ref de Vue 3 Composition API pour un état réactif. v-for itère les tâches, @click gère l'événement. Copiez-collez pour une home interactive sans backend.

Page About avec fetch

pages/about.vue

<template>
  <div>
    <h1>A propos</h1>
    <p>{{ message }}</p>
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup lang="ts">
const { data: user } = await $fetch('/api/user')
const message = 'Page About chargée avec useFetch !'
</script>

useFetch (ou $fetch en setup) charge des données async au build ou runtime. Créez d'abord /server/api/user.ts pour l'API. Cela démontre le fetch universel Nuxt (SSR/SSG).

API server route

server/api/user.ts

export default defineEventHandler(async (event) => {
  await new Promise(resolve => setTimeout(resolve, 1000))
  return {
    id: 1,
    name: 'John Doe',
    email: 'john@example.com'
  }
})

Dans server/api/, cette route Nitro retourne un utilisateur simulé avec delay pour tester loading. defineEventHandler gère HTTP. Accessible via /api/user, rendu SSR.

Composant réutilisable

components/TaskList.vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.text }} <button @click="$emit('complete', task.id)">Terminé</button>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  title: string
  tasks: { id: number; text: string }[]
}>()

const emit = defineEmits<{
  (e: 'complete', id: number): void
}>()
</script>

Composant auto-importé par Nuxt. Props typées TS, emits pour communication parent-enfant. Utilisez-le dans pages/index.vue via .

Bonnes pratiques

Utilisez Composition API partout pour réactivité optimale.
Activez TypeScript strict dès le début pour catcher les erreurs.
Préférez useFetch/useAsyncData pour données serveur vs client.
Organisez en composants composables pour logique réutilisable.
Configurez runtimeConfig pour secrets et env vars.

Erreurs courantes à éviter

Oublier await sur useFetch : provoque hydration mismatch SSR/client.
Modifier node_modules : utilisez npm install pour dépendances.
Ignorer devtools: true : perd les inspections Nuxt/Vue.
Routes manuelles : fiez-vous au file-based routing.

Pour aller plus loin

Maîtrisez les modules comme @nuxt/content pour CMS headless ou @nuxt/image pour optimisation. Déployez sur Vercel avec npm run build && npm run preview. Consultez la doc officielle Nuxt et nos formations Learni pour Vue/Nuxt avancés.

Comment démarrer un projet Nuxt.js en 2026