Le guide parfait pour configurer un nouveau projet Nuxt

Chaque fois que je crée un nouveau projet Nuxt, je suis des étapes spécifiques pour garantir une configuration optimale. Je travaille avec Nuxt depuis 2019 et j'ai développé des habitudes spécifiques lors du démarrage de nouveaux projets.

J'ai pu explorer de nombreux modules et examiner des projets aussi bien d'experts que de débutants. Cela m'a permis de bien comprendre ce qui fonctionne dans l'écosystème Nuxt. Configurer un nouveau projet peut sembler décourageant, surtout pour les débutants, c'est pourquoi j'ai décidé de partager ce guide pour vous aider à configurer votre projet Nuxt aussi efficacement que possible.

Création d'un nouveau projet Nuxt

Commençons par créer un nouveau projet Nuxt. C'est l'étape la plus simple, nécessitant juste une commande :

npx nuxi@latest init <nom-du-projet>

!TIP Vous pouvez également créer un projet prêt pour la v4 avec npx nuxi init nuxt-app -t v4-compat, ce qui vous évite la nécessité de Préparer pour Nuxt 4.

!NOTE Je choisis toujours pnpm comme gestionnaire de paquets. Vous pouvez sélectionner celui que vous préférez, mais je recommande d'essayer pnpm.

L'exécution de cette commande va créer un nouveau projet Nuxt dans le répertoire <nom-du-projet>. L'application est minimaliste : aucune configuration, aucun module, juste Nuxt et un fichier app.vue.

Mettre à jour les dépendances

Avant de continuer, il est essentiel de mettre à jour les dépendances vers leurs dernières versions. Cela vous permet de tirer parti des nouvelles fonctionnalités et correctifs tout en évitant des dépendances obsolètes qui pourraient causer des problèmes par la suite. Exécutez la commande suivante pour les mettre à jour :

npx taze -w

Le paquet taze, développé par Anthony Fu, met à jour toutes les dépendances vers leurs dernières versions. C'est similaire à npm-check-updates mais plus puissant grâce à son respect version avec semver tout en étant plus rapide.

Préparer pour Nuxt 4

Actuellement, la dernière version stable de Nuxt est la version 3. Cependant, la version 4 est en développement et promet de nombreuses fonctionnalités et améliorations. Bien qu'elle ne soit pas officiellement publiée, vous pouvez préparer vos projets pour cette future mise à jour en ajoutant la configuration suivante dans votre nuxt.config.js :

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  }
})

Cette configuration vous permet de commencer à développer vos projets comme si vous utilisiez déjà Nuxt 4. Cette prévoyance vous permet non seulement de bénéficier des fonctionnalités à venir, mais aussi de minimiser le travail requis pour la mise à niveau lorsque Nuxt 4 sera publié.

Pour tirer le meilleur parti de Nuxt 4, créez un nouveau dossier app et déplacez le fichier app.vue à l'intérieur :

mkdir app && mv app.vue app

!TIP Vous pouvez également créer un projet prêt pour la v4 en utilisant la commande npx nuxi init nuxt-app -t v4-compat.