Création d'une plateforme moderne avec Nuxt 4
Introduction
Cette plateforme a été entièrement développée avec Nuxt 4 en mode SSG (Static Site Generation). L'objectif : créer une plateforme de publication d'articles performante, SEO-friendly, et simple à maintenir.
Dans cet article, je partage les choix techniques, l'architecture du projet, et les leçons apprises lors du développement.
Stack technique
Framework et modules
- Nuxt 4 - Le méta-framework Vue.js pour la génération statique
- @nuxt/content - Gestion du contenu Markdown avec collections Zod
- @nuxt/image - Optimisation automatique des images (WebP, AVIF)
- @nuxtjs/tailwindcss - Framework CSS utility-first
Technologies complémentaires
- TypeScript - Typage statique pour un code plus robuste
- Vue 3 Composition API - Architecture moderne des composants
- Tailwind CSS - Styling avec le plugin Typography pour le contenu
Architecture du projet
learn/
├── app/
│ ├── components/ # Composants réutilisables
│ ├── composables/ # Logique partagée (useFormatDate, useTags)
│ ├── layouts/ # Layout principal
│ ├── pages/ # Routes et pages
│ └── types/ # Interfaces TypeScript
├── content/
│ └── posts/ # Articles Markdown
├── public/
│ └── images/ # Images statiques
└── server/
└── routes/ # RSS et Sitemap
Gestion du contenu
Les articles sont rédigés en Markdown avec un front-matter YAML :
---
title: "Titre de l'article"
description: "Description SEO (150-160 caractères)"
date: 2026-01-24
author: "Nom de l'auteur"
tags: [tag1, tag2, tag3]
image: "/images/posts/2026/01/cover.jpg"
---
Système de brouillons
Une convention simple pour gérer les brouillons :
- Publié :
mon-article.md - Brouillon :
mon-article.draft.md
Les fichiers .draft.md sont automatiquement exclus de la production.
Fonctionnalités principales
SEO optimisé
Chaque page inclut :
- Meta title et description dynamiques
- OpenGraph et Twitter Cards
- Structured Data (JSON-LD) pour Schema.org
- Canonical URLs
- Sitemap XML et flux RSS
Performance
- Lazy loading des images avec
@nuxt/image - Code splitting automatique par page
- Formats modernes : WebP et AVIF
- Images responsive avec srcset
Navigation
- Filtrage par tags sur la page d'accueil
- Pagination URL-based (
/page/2,/page/3...) - Navigation article précédent/suivant
- Page dédiée par tag (
/tags/nuxt)
Leçons apprises
queryCollection vs queryContent
Avec Nuxt Content v3 et les collections définies dans content.config.ts, il faut utiliser queryCollection() :
// Nouvelle API
const { data } = await useAsyncData('articles', () =>
queryCollection('posts')
.order('date', 'DESC')
.all()
)
Propriété stem
La collection retourne stem au lieu de _path :
// stem = "posts/mon-article" (sans slash initial)
const articlePath = computed(() => `/${article.stem}`)
Types partagés
Centraliser les interfaces TypeScript évite la duplication :
// app/types/article.ts
export interface Article {
stem: string
title: string
description: string
date: string
author?: string
tags?: string[]
image?: string
}
Composables créés
useFormatDate
Formatage des dates en français :
const { formatDate } = useFormatDate()
// "24 janvier 2026"
useTags
Extraction et comptage des tags :
const { extractTags } = useTags()
const tags = extractTags(articles)
// [{ name: 'nuxt', count: 5 }, { name: 'vue', count: 3 }]
Déploiement
La plateforme est générée en statique avec :
npm run generate
Le résultat dans .output/public/ peut être déployé sur n'importe quel CDN (Vercel, Netlify, Cloudflare Pages).
Conclusion
Nuxt 4 avec @nuxt/content offre une excellente expérience développeur pour créer une plateforme statique. La combinaison TypeScript + Tailwind CSS permet un développement rapide et maintenable.
Le code source de cette plateforme est disponible pour ceux qui souhaitent s'en inspirer. N'hésitez pas à me contacter pour toute question !
