Débuter avec Nuxt.js

Si vous êtes un développeur Vue cherchant à créer des applications prêtes pour la production avec un workflow moderne, Nuxt 4 vous offre le chemin le plus rapide. Nuxt s’appuie sur Vue 3 avec le rendu côté serveur, le rendu hybride, le routage basé sur les fichiers et un modèle de déploiement unifié qui fonctionne sur Node, les hébergements statiques, le serverless et les environnements edge.

Ce tutoriel destiné aux débutants vous guide dans la création de votre première application Nuxt 4 en utilisant les configurations actuelles par défaut comme Vue 3, Vite, TypeScript, les composables et Nitro.

Qu’est-ce que Nuxt 4 et pourquoi devriez-vous l’utiliser ?

Nuxt 4 est la version majeure actuelle du framework Nuxt et le choix recommandé pour les nouvelles applications Vue fin 2025. Il utilise Vue 3, Vite et le moteur serveur Nitro pour offrir une expérience de développement rapide et une architecture de production flexible.

Contrairement aux applications Vue classiques, Nuxt 4 fournit le SSR prêt à l’emploi, gère le routage automatiquement, traite la récupération de données dans les contextes serveur et client, et est livré avec une structure de projet prévisible et basée sur les conventions.

Vue 3 + Vite par défaut

Nuxt 4 utilise Vite pour son serveur de développement et son pipeline de build. Cela vous offre un remplacement de module à chaud quasi instantané, des démarrages à froid rapides et des bundles de sortie hautement optimisés.

L’API de Composition Vue 3 et la conception TypeScript-first fournissent une inférence de type solide, une meilleure organisation du code et un comportement de composant prévisible.

TypeScript, aucune configuration requise

Le support TypeScript est intégré. Nuxt génère automatiquement les types en fonction de vos répertoires de projet, routes API, middlewares et composants. Votre IDE comprend l’intégralité de votre projet dès que vous enregistrez.

Configuration de votre premier projet Nuxt 4

Installation avec npm create nuxt@latest

Créez un nouveau projet en utilisant le CLI moderne de Nuxt 4 :

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

Cela configure un projet Nuxt 4 avec TypeScript, Vite, Nitro et les composables auto-importés prêts à l’emploi.

Vue d’ensemble de la structure des répertoires

Un projet Nuxt 4 fraîchement créé comprend :

• pages/ — Routage basé sur les fichiers
• components/ — Composants auto-importés
• composables/ — Logique réutilisable avec imports automatiques
• server/api/ — Points de terminaison serveur propulsés par Nitro
• public/ — Ressources statiques
• nuxt.config.ts — Configuration TypeScript-first

Cette structure élimine la surcharge de configuration et maintient tout prévisible.

Concepts fondamentaux : Pages, Layouts, Composables, Auto-Imports

Routage basé sur les fichiers dans Nuxt 4

Ajoutez un fichier Vue dans pages/ et Nuxt crée automatiquement une route :

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const id = route.params.id
</script>

<template>
  <h1>Product {{ id }}</h1>
</template>

Les paramètres de route dynamiques utilisent des crochets.

Layouts pour l’interface utilisateur partagée

Les layouts permettent des enveloppes partagées autour des pages :

<!-- layouts/default.vue -->
<template>
  <AppHeader />
  <main><slot /></main>
  <AppFooter />
</template>

Les pages utilisent le layout par défaut automatiquement. Vous pouvez changer de layout en utilisant definePageMeta.

Composables et Auto-Imports

Les composables à l’intérieur de composables/ sont auto-importés partout :

// composables/useCounter.ts
export const useCounter = () => {
  const count = useState('count', () => 0)
  const inc = () => count.value++
  return { count, inc }
}

Pas de déclarations d’import, pas de code répétitif — Nuxt gère tout cela.

Récupération de données dans Nuxt 4

useFetch pour les requêtes compatibles SSR

useFetch gère le chargement de données côté serveur et l’hydratation client :

<script setup lang="ts">
const { data: posts } = await useFetch('/api/posts')
</script>

Cela évite la double récupération entre serveur et client et fonctionne parfaitement avec Nitro.

Routes API via Nitro

Créez des points de terminaison serveur dans server/api/ :

// server/api/posts.get.ts
export default defineEventHandler(async () => {
  const posts = await $fetch('https://jsonplaceholder.typicode.com/posts')
  return posts.slice(0, 5)
})

Nitro optimise automatiquement ces points de terminaison pour les déploiements Node, statiques, serverless ou edge.

useAsyncData pour la logique personnalisée

Si vous avez besoin de plus de contrôle :

<script setup lang="ts">
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts', { query: { limit: 5 } })
)
</script>

Gestion d’état avec Pinia

Pour l’état au niveau de l’application, Nuxt 4 utilise Pinia :

npm install @pinia/nuxt

Activez-le :

export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Créez un store :

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const profile = ref(null)
  async function load() {
    profile.value = await $fetch('/api/user')
  }
  return { profile, load }
})

Pinia s’intègre directement avec les auto-imports de Nuxt et le comportement SSR.

Modes de rendu dans Nuxt 4

Rendu côté serveur par défaut

Nuxt 4 effectue le rendu des pages sur le serveur pour le SEO et les performances. Vous pouvez ajuster le rendu par route :

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { isr: 3600 }
  }
})

Cela permet des applications hybrides qui mélangent SSR, pages statiques pré-rendues et sections dynamiques côté client uniquement.

Génération statique et déploiement hybride

Générez une sortie statique si nécessaire :

npm run generate

Vous pouvez pré-rendre les pages marketing, garder les tableaux de bord dynamiques et tout exécuter via Nitro.

Déploiement de votre application Nuxt 4

Build pour la production

npm run build

Nuxt génère un répertoire .output/ contenant le code serveur, les ressources client et les presets pour toutes les principales plateformes d’hébergement.

Déploiement agnostique de plateforme

Déployez vers :

• Serveurs Node
• Hébergements statiques
• Plateformes serverless (AWS, Vercel, Netlify)
• Réseaux edge (Cloudflare Workers, Vercel Edge)

Nitro sélectionne automatiquement le bon preset.

Conclusion

Débuter avec Nuxt.js aujourd’hui signifie utiliser Nuxt 4.
Avec le SSR par défaut, le rendu hybride, les auto-imports, les composables et Nitro qui propulse le déploiement, Nuxt 4 vous donne tout ce dont vous avez besoin pour créer des applications Vue rapides, modernes et maintenables.

Commencez avec :

npm create nuxt@latest

—et vous êtes déjà sur les bonnes bases.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.