Nuxt Content est un module officiel Nuxt qui transforme vos fichiers Markdown, YAML et JSON en contenu web dynamique. C'est comme un CMS (Content Management System) intégré directement dans votre application Nuxt, mais basé sur des fichiers plutôt qu'une base de données.
Pour faire simple : au lieu d'écrire votre contenu dans un éditeur WordPress ou une base de données, vous écrivez dans des fichiers Markdown (comme des documents texte enrichis), et Nuxt Content les transforme automatiquement en pages web.
Markdown est un format d'écriture simple et lisible. Vous écrivez comme dans un éditeur de texte, avec quelques symboles pour le formatage :
# Titre principal
## Sous-titre
Voici un **texte en gras** et un *texte en italique*.
- Liste à puces
- Deuxième élément
[Lien vers mon site](https://example.com)
Contrairement à un CMS classique, votre contenu est stocké dans des fichiers que vous pouvez gérer avec Git. Cela permet de suivre toutes les modifications, revenir en arrière si nécessaire, et collaborer efficacement à plusieurs sur le contenu.
Nuxt Content génère des pages statiques ultra-rapides. Le contenu Markdown est transformé en HTML lors de la compilation, résultant en un site très performant qui se charge instantanément.
Nuxt Content inclut un moteur de recherche intégré qui indexe automatiquement tout votre contenu. Vous pouvez ajouter une barre de recherche à votre site en quelques lignes de code.
Combiné avec Nuxt SEO, Nuxt Content génère automatiquement les sitemaps, meta tags et données structurées pour un référencement optimal.
Créez simplement un fichier .md dans le dossier content/ :
---
title: Mon premier article
description: Découvrez Nuxt Content
date: 2025-10-06
---
# Mon premier article
Voici le contenu de mon article avec **Nuxt Content**.
## Une section
Du texte intéressant ici...
Nuxt Content le transforme automatiquement en page accessible sur votre site.
Dans votre page Vue.js :
<template>
<div>
<ContentDoc />
</div>
</template>
C'est tout ! Nuxt Content gère automatiquement le rendu.
Pour un blog, listez tous les articles :
<template>
<div>
<ContentList path="/blog">
<template #default="{ list }">
<div v-for="article in list" :key="article._path">
<h2>{{ article.title }}</h2>
<p>{{ article.description }}</p>
<NuxtLink :to="article._path">Lire l'article</NuxtLink>
</div>
</template>
</ContentList>
</div>
</template>
Ajoutez une recherche :
<template>
<div>
<input v-model="search" placeholder="Rechercher...">
<ContentList :query="{ where: { $or: [
{ title: { $contains: search } },
{ description: { $contains: search } }
]}}">
<!-- Résultats -->
</ContentList>
</div>
</template>
Vous pouvez utiliser des composants Vue.js directement dans Markdown :
# Mon article
Voici un callout personnalisé :
::callout{color="primary"}
Ceci est une information importante !
::
Et voici un bouton :
:button[Cliquer ici]{to="/contact"}
Le frontmatter (en-tête YAML) permet d'ajouter des métadonnées :
---
title: Titre de l'article
description: Description SEO
date: 2025-10-06
author: Cyril Julien
tags: [nuxt, content, blog]
image: /images/article.jpg
---
Ces métadonnées sont accessibles dans vos templates et utiles pour le SEO.
Le code est automatiquement coloré avec Shiki :
\`\`\`javascript
const message = "Hello World";
console.log(message);
\`\`\`
Générez une table des matières automatique depuis vos titres Markdown :
<template>
<div>
<ContentTableOfContents />
<ContentDoc />
</div>
</template>
Nuxt Content est parfait pour les blogs. Écrivez vos articles en Markdown, ajoutez des métadonnées (date, auteur, tags), et Nuxt Content génère automatiquement les pages, la liste d'articles, la recherche et le SEO.
Exemple : Le blog que vous consultez actuellement utilise Nuxt Content pour gérer tous les articles.
Pour créer une documentation technique, Nuxt Content offre la structure, la recherche et la navigation nécessaires.
Tout site où le contenu texte est important (études de cas, guides, tutoriels) bénéficie de Nuxt Content.
Les portfolios de projets peuvent être gérés en Markdown avec métadonnées (client, date, technologies, images).
J'utilise Nuxt Content sur plusieurs projets, dont ce site Socium Web.
Tous mes articles de blog sont écrits en Markdown avec Nuxt Content. Cela me permet d'écrire rapidement sans me soucier du HTML, de versionner le contenu avec Git, et de bénéficier d'un SEO automatisé.
Les études de cas comme Art Conseil ou Christina Aleixo sont gérées avec Nuxt Content. Le frontmatter contient les métadonnées (client, services, date, badge) et le contenu est en Markdown.
L'écriture est rapide car Markdown est simple et intuitif. Le versioning Git permet de suivre toutes les modifications du contenu. Le SEO est automatique grâce à la combinaison Nuxt Content + Nuxt SEO. Les mises à jour sont faciles sans toucher au code de l'application. La performance est optimale avec génération statique du contenu.
WordPress est un CMS complet avec interface d'administration, base de données et plugins. Nuxt Content est plus léger, basé sur des fichiers, sans base de données.
Choisir Nuxt Content si :
Choisir WordPress si :
Strapi et Contentful sont des CMS headless avec base de données et API. Nuxt Content est basé sur des fichiers locaux.
Avantages Nuxt Content :
Avantages CMS headless :
npx nuxi@latest module add content
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/content'
],
content: {
highlight: {
theme: 'github-dark'
}
}
})
content/
├── index.md → /
├── about.md → /about
├── blog/
│ ├── article-1.md → /blog/article-1
│ └── article-2.md → /blog/article-2
└── projects/
└── project-1.md → /projects/project-1
Nuxt Content transforme Nuxt en une plateforme de publication puissante. Avec Markdown pour l'écriture, Git pour le versioning, et génération statique pour la performance, Nuxt Content est idéal pour les blogs, documentation et sites de contenu.
Si vous cherchez une alternative moderne aux CMS traditionnels, avec performance optimale et workflow développeur, Nuxt Content mérite votre attention.
Dernière mise à jour : Octobre 2025
Version Nuxt Content : 3.x (dernière version stable)
Cet article vous a-t-il été utile ?
Vos retours sont complètement anonymes et m'aident à améliorer mon contenu
Nuxt : le framework Vue.js pour des applications web performantes
Découvrez Nuxt, le framework Vue.js qui facilite la création d'applications web modernes, performantes et optimisées pour le SEO. Framework full-stack pour Vue.js.
Nuxt Hooks : automatiser les actions
Les hooks Nuxt permettent d'exécuter automatiquement du code à des moments précis du cycle de vie de votre application.