Nuxt Content : CMS basé sur Markdown pour Nuxt

Nuxt Content, c'est quoi ?

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.

Pourquoi utiliser Nuxt Content ?

Simplicité d'écriture

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)

Versioning avec Git

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.

Performance optimale

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.

Recherche intégrée

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.

SEO automatisé

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.

Nuxt Content en pratique

Créer du contenu

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.

Afficher le contenu

Dans votre page Vue.js :

<template>
  <div>
    <ContentDoc />
  </div>
</template>

C'est tout ! Nuxt Content gère automatiquement le rendu.

Lister des articles

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>

Recherche de contenu

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>

Fonctionnalités avancées

Composants Vue dans Markdown

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"}

Frontmatter

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.

Syntax highlighting

Le code est automatiquement coloré avec Shiki :

\`\`\`javascript
const message = "Hello World";
console.log(message);
\`\`\`

Table des matières automatique

Générez une table des matières automatique depuis vos titres Markdown :

<template>
  <div>
    <ContentTableOfContents />
    <ContentDoc />
  </div>
</template>

Cas d'usage idéaux

Blogs

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.

Documentation

Pour créer une documentation technique, Nuxt Content offre la structure, la recherche et la navigation nécessaires.

Sites de contenu

Tout site où le contenu texte est important (études de cas, guides, tutoriels) bénéficie de Nuxt Content.

Portfolios

Les portfolios de projets peuvent être gérés en Markdown avec métadonnées (client, date, technologies, images).

Mon utilisation de Nuxt Content

J'utilise Nuxt Content sur plusieurs projets, dont ce site Socium Web.

Blog et articles

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é.

Études de cas projets

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.

Avantages constatés

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.

Nuxt Content vs CMS traditionnels

Nuxt Content vs WordPress

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 :

• Vous êtes à l'aise avec Markdown
• Vous voulez une performance maximale
• Vous préférez Git pour versionner le contenu
• Vous n'avez pas besoin d'interface d'administration complexe

Choisir WordPress si :

• Vous voulez une interface d'administration complète
• Plusieurs non-techniques doivent gérer le contenu
• Vous avez besoin de nombreux plugins

Nuxt Content vs Strapi/Contentful

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 :

• Pas de base de données à gérer
• Pas d'API à configurer
• Déploiement ultra-simple
• Gratuit (pas d'abonnement)

Avantages CMS headless :

• Interface d'administration riche
• Gestion multi-utilisateurs avancée
• Médias optimisés automatiquement

Installation et configuration

Installation

npx nuxi@latest module add content

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    highlight: {
      theme: 'github-dark'
    }
  }
})

Structure des fichiers

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

Ressources

Documentation et outils

• Nuxt Content Documentation : documentation officielle
• Nuxt Content Examples : exemples de code
• Markdown Guide : apprendre Markdown

Articles connexes

• Nuxt : framework Vue.js performant : la base de Nuxt Content
• Nuxt SEO : automatiser votre référencement : parfait avec Nuxt Content
• Nuxt UI Pro : composants premium : pour styler votre contenu
• Git : versioning de code : pour versionner votre contenu

Conclusion

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)