MDC : Enrichir vos contenus avec Nuxt

MDC (Markdown Components) est l'équivalent de MDX pour Nuxt. Il vous permet d'écrire vos contenus en Markdown tout en y ajoutant des éléments interactifs et des composants personnalisés. C'est ce que j'utilise sur Socium Web !

C'est quoi MDC, concrètement ?

Markdown enrichi pour Nuxt

MDC fonctionne comme MDX, mais pour les sites faits avec Nuxt au lieu de Next.js. Vous écrivez votre texte en Markdown (simple et rapide), et vous pouvez insérer des composants (éléments interactifs) quand vous en avez besoin.

Par exemple, vous écrivez votre article normalement, et à un moment vous voulez insérer une boîte colorée pour attirer l'attention, ou un bouton pour que vos visiteurs vous contactent. Avec MDC, c'est facile !

Exemple concret

Dans un article MDC, vous écrivez :

# Mon article

Voici mon texte normal en Markdown.

::callout{icon="i-heroicons-light-bulb" color="primary"}
**Astuce importante** : Cette boîte colorée attire l'attention sur un point clé !
::

Et je continue mon texte...

La boîte s'affiche automatiquement avec la bonne couleur, la bonne icône, et le bon style !

Pourquoi utiliser MDC ?

Écriture simple, résultat riche

Vous gardez la simplicité de Markdown pour écrire vos textes (pas de code compliqué), mais vous pouvez enrichir vos contenus avec des boîtes colorées, des boutons, des alertes, des cartes...

Composants réutilisables

Votre développeur crée des composants une fois (alerte, bouton, citation stylisée, tableau de prix), et vous les réutilisez dans tous vos articles. Vous écrivez juste quelques caractères, et le composant s'affiche avec son style complet.

Intégré à Nuxt Content

MDC est directement intégré à Nuxt Content, l'outil qui gère les contenus sur les sites Nuxt. Tout fonctionne ensemble naturellement, sans configuration complexe.

Pour qui est MDC ?

Sites Nuxt avec du contenu

Si votre site est fait avec Nuxt et Nuxt Content, MDC est automatiquement disponible. Vous pouvez l'utiliser sans installation supplémentaire.

Blogs et sites de contenu

Si vous tenez un blog ou un site de contenu (articles, études de cas, actualités) et voulez des articles visuellement riches, MDC est parfait.

Sites nécessitant des appels à l'action

Si vous voulez inciter vos visiteurs à agir (s'inscrire, vous contacter, acheter), MDC vous permet d'insérer facilement des boutons et des éléments interactifs dans vos articles.

MDC sur Socium Web

Sur Socium Web, tous mes contenus utilisent MDC :

Articles de blog

Mes articles de blog sont écrits en Markdown simple, enrichis avec des boîtes colorées (callouts), des alertes, des boutons vers mes services...

Études de cas

Mes études de cas utilisent MDC pour structurer le contenu : cartes pour présenter les technologies, listes d'étapes visuelles, citations de clients...

Pages de services

Mes pages de services combinent Markdown pour le texte et des composants MDC pour les tableaux de prix, les listes d'avantages, les appels à l'action...

Exemples de composants MDC

Voici quelques composants que j'utilise sur Socium Web avec MDC :

Boîtes colorées (callouts)

::callout{icon="i-heroicons-check-circle" color="primary"}
**Résultat** : Le site est maintenant 3 fois plus rapide !
::

Cartes cliquables

::card-group
  ::card{icon="i-heroicons-code-bracket" title="Next.js" to="/blog/next-js"}
  Framework React moderne
  ::
  ::card{icon="i-heroicons-paint-brush" title="Tailwind CSS" to="/blog/tailwind-css"}
  Framework CSS rapide
  ::
::

Boutons d'action

[Me contacter](/contact){.button .primary}

C'est simple à écrire, et le résultat est professionnel !

MDC vs MDX

MDX (pour Next.js / React)

MDX est conçu pour les sites faits avec Next.js et React. Si votre site utilise ces technologies, MDX est le bon choix.

MDC (pour Nuxt / Vue)

MDC est conçu pour les sites faits avec Nuxt. Si votre site utilise Nuxt, MDC est déjà intégré via Nuxt Content.

Les deux font la même chose (enrichir Markdown avec des composants), juste pour des technologies différentes.

Comment l'utiliser avec Nuxt Studio ?

Si vous utilisez Nuxt Studio (l'éditeur visuel pour Nuxt), vous pouvez insérer des composants MDC directement dans l'interface, sans écrire le code. Nuxt Studio vous propose les composants disponibles, vous cliquez, et c'est inséré !

C'est le meilleur des deux mondes : la simplicité visuelle de Nuxt Studio avec la puissance de MDC.

Conclusion

MDC est l'outil idéal pour enrichir vos contenus sur un site Nuxt. Vous gardez la simplicité de Markdown pour écrire, et vous ajoutez des éléments visuels modernes quand c'est utile. Si votre site est fait avec Nuxt et Nuxt Content, MDC est déjà disponible : profitez-en pour créer des contenus riches et engageants !

Articles connexes : Markdown : écrire simplement • MDX : équivalent pour React • Nuxt Content : gérer vos contenus • Nuxt Studio : éditeur visuel

Découvrir mes services • Voir mes projets • Me contacter