Nuxt 4 : Les Nouveautés qui Changent la Donne

Nuxt 4 est arrivé avec son lot d'innovations majeures. Explorons ensemble les changements les plus impactants pour vos projets.

Nouvelle structure de projet

Nuxt 4 introduit une nouvelle structure avec le dossier app/ qui centralise tous les fichiers de votre application :

my-project/
├── app/
│   ├── app.vue
│   ├── components/
│   ├── composables/
│   ├── layouts/
│   ├── middleware/
│   ├── pages/
│   └── plugins/
├── content/
├── public/
├── server/
└── nuxt.config.ts

Cette organisation apporte une meilleure séparation des préoccupations et une structure plus prévisible.

Performances améliorées

Hydratation optimisée

Nuxt 4 améliore significativement le temps de First Contentful Paint grâce à :

• Lazy hydration : Hydratation différée des composants non visibles
• Island architecture : Composants isolés avec leur propre contexte
• Streaming SSR : Envoi progressif du HTML

Bundle plus léger

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    treeshakeClientOnly: true,
    componentIslands: true,
  },
});

Nuxt Content v3

L'intégration de Nuxt Content a été repensée avec :

• Collections typées : Schémas Zod pour vos contenus
• Requêtes améliorées : API plus intuitive et performante
• Support MDC : Markdown avec composants Vue intégrés

// content.config.ts
export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: "page",
      source: "blog/**/*.md",
      schema: z.object({
        title: z.string(),
        date: z.string(),
      }),
    }),
  },
});

Migration depuis Nuxt 3

La migration est facilitée grâce à l'outil nuxt-migrate :

npx nuxi@latest upgrade --dedupe

Changements majeurs à noter

1. Nouvelle structure de dossiers : Déplacez vos fichiers dans app/
2. Content v3 : Mise à jour de vos requêtes Content
3. Compatibilité Date : Nouveau format requis

Conclusion

Nuxt 4 représente une évolution majeure de l'écosystème Vue/Nuxt. Ces améliorations de performance et de DX en font un choix encore plus solide pour vos projets modernes.

Avez-vous déjà migré vers Nuxt 4 ? Partagez votre expérience dans les commentaires !