Créer un blog facile à utiliser avec Nuxt Content

Comment créer un blog facile à utiliser avec Nuxt ?

Avec le module Nuxt Content.

On crée un répertoire blog/ dans un dossier content/, dans lequel on stocke les articles de blog au format Markdown, YAML, CSV ou JSON.

Il n'y a ni CMS tiers à configurer, ni service externe.

Récupérer la liste des articles

Dans la page BlogList.vue, une ligne suffit pour récupérer les articles :

<script setup>
const { data: blogList } = useAsyncData('blogPostList', () => {
  return queryContent('/blog').find()
})
</script>

Afficher un article

Pour les pages d'article, la page [...slug].vue n'a qu'à appeler :

<script setup>
const { path } = useRoute()
const { data: blogPost } = await useAsyncData(`content-${path}`, () => {
  return queryContent().where({ _path: path }).findOne()
})
</script>

pour récupérer l'article associé à path.

Des composants Vue dans le Markdown

À noter qu'avec Nuxt Content, on peut facilement imbriquer un composant Vue (un compteur par exemple) directement dans un article de blog en Markdown :

---
title: My new blog article
---

## Title

Text

<Counter></Counter>