> ## Content Index
> Fetch the complete content index at: https://www.sfeir.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Nuxt Content : la solution pour développer votre blog.
- URL: https://www.sfeir.dev/front/nuxt-content-la-solution-pour-developper-votre-blog-2/
- Published: 2025-01-24T09:53:10.000Z
- Updated: 2025-01-24T09:53:10.000Z
- Description: Découvrez comment Nuxt Content simplifie la création de blogs performants et personnalisés. Explorez les avantages d'un CMS léger et flexible pour optimiser votre contenu et améliorer votre référencement.
- Author: Mohamed Gontara
- Tags: Front, Nuxt.js, Vue.js, CMS

Créer un blog est devenu un incontournable pour les entreprises, les développeurs et créateurs de contenu pour partager leurs connaissances, attirer un public et renforcer leur présence en ligne. Pour la création d'un blog, il existe plusieurs solutions, une payante comme **Wix** avec ses interfaces intuitives et sa simplicité, avec des fonctionnalités prêtes à l'emploi mais limitant en termes de personnalisation. D'autres solutions, comme **Next.js**, offrent une grande liberté et flexibilité, mais nécessitent souvent une configuration plus complexe.

[**Nuxt content**](https://content.nuxt.com/?ref=sfeir.dev) est possiblement la solution idéale pour la création des blogs, avec son positionnement qui combine les avantages des CMS et des frameworks. Nuxt Content est un module Nuxt qui permet de créer des pages Web à partir des fichiers Markdown. Il offre :

- **Grande flexibilité**: Personnalisation entière grâce aux composants/modules **Vue.js** et **Nuxt.js.**
- **Performances optimales**: génération des sites statiques, gestion automatique des routes et tous [les avantages ](https://www.sfeir.dev/front/nuxt-js-booster-la-performance-de-votre-site-web/)de **Nuxt.js.**
- **Gestion facile du contenu**: possibilité d'écrire le contenu avec du Markdown, Yaml ou Json.
- **Écosystème riche**: une communauté Vue.js avec ses nombreux outils et plugins, par exemple [**Nuxt Studio**](https://nuxt.studio/?ref=sfeir.dev)**.**

Pour illustrer les avantages de Nuxt Content, nous allons créer, étape par étape, un blog fonctionnel.

1. **Installation:**

On commence par la création d'un projet Nuxt.js avec la commande :

```bash
npx create-nuxt-app <project-name>
```

Après la création du projet, on peut installer le module Nuxt Content et le configurer dans le fichier `nuxt.config.ts`

```bash
yarn add @nuxt/content
```

```Typescript
export default { 
 modules: ['@nuxt/content']
}
```

Nuxt Content nécessite l'activation de l'option Rendu côté serveur de Nuxt :

```Typescript
export default { 
 ...
 ssr: true
}
```

1. **Configuration:**

Pour ce blog, nous allons utiliser la format Markdown. Nous allons créer le dossier `/content` pour stocker les fichiers Markdown (les articles).

Il est possible aussi d'ajouter des sous dossiers :

```directory
content/
  frameworks/
    vue.md
    nuxt.md
  examples/
    vercel.md
    netlify.md
    heroku.md
  index.md
```

Nuxt content se charge de générer les chemins des articles :

```directory
/frameworks/vue.html
/frameworks/nuxt.html
/examples/vercel.html
/examples/netlify.html
/examples/heroku.html
/index.html

```

Nuxt content nous permet aussi d'importer les articles à partir d'une source externe, il suffit d'ajouter l'url de l'api utilisée au niveau de la configuration `nuxt.config.ts`:

```javascript
export default defineNuxtConfig({
  content: {
    api: {
      baseURL: '/api/_my_content'
    }
  }
})
```

1. **Création des articles:**

Nuxt Content utilise la convention [Front-matter](https://gohugo.io/content-management/front-matter/?ref=sfeir.dev) , des métadonnées en syntaxe YAML dans le but de fournir des informations supplémentaires sur un fichier Markdown (dans notre cas un article), exemple :

```markdown
---
title: Mon article
description: Description de mon article
author: John Doe
---

# Mon article

Contenu de mon article...
```

Nuxt content gère nativement 5 métadonnées :

- `titre` : titre de la page.
- `description` : description de la page.
- `draft`: un document (qui représente une page) n'est pas en mode draft par défaut.
- `navigation` : définir si la page est incluse dans la navigation ou non.
- `head` : un objet qui contient tous les métadonnées liés à la balise `<head>`
- `image`: ça représente une image principale pour le document.

Nuxt content utilise le syntaxe MDC (Markdown Directives), extension de la syntaxe Markdown crée par l'équipe Nuxt Content, qui offre aux développeurs la possibilité d'insérer des composants Vue.js dans d'un fichier Markdown, en passant par des [slots](https://vuejs.org/guide/components/slots?ref=sfeir.dev) ou des [props](https://vuejs.org/guide/components/props.html?ref=sfeir.dev). 

Pour utiliser des composants Vue.js dans des fichiers Markdown, il faut les créer sous le chemin `components/content/`.

***Block Component*** : il faut mettre `::` avant le nom du composant, le contenu entre les deux `::` sera automatiquement afficher dans le `<slot />` du composant appelé. 

```markdown
::card
cette partie sera afficher dans la partie slot.
::
```

```html
<!-- components/content/Card.vue -->
<template>
  <div>
    <slot />
  </div>
</template>
```

***Slots*** : même principe du Block component avec la possibilité d'ajouter des slots nommés, il suffit d'ajouter dans le Block component le nom du slot nommé précédé par `#`.

```markdown
::card
cette partie sera afficher dans la partie slot.

#description
cette partie sera afficher dans la partie description.
::
```

```html
<!-- components/content/Card.vue -->
<template>
  <div>
    <slot />
    <slot name="description" />
  </div>
</template>
```

***Props*** : il est possible de passer des paramètres à partir du fichier Markdown vers le composant Vue.js en mettant `key=value` entre `{}`, exemple:

```markdown
::alert{type="warning"}
The alert component.
::
```

```html
<script setup>
defineProps(['type'])
</script>

<template>
  <div :class="[type]">
    <slot />
  </div>
</template>
```

Il existe d'autres avantages avec le syntaxe MDC, comme l'imbrication des Block Component, le composant`<ContentSlot />` pour afficher le contenu Markdown dans des fichiers vue.js, ...

1. **Gestion des articles:**

***Affichage :***

Nuxt content nous fournit le composant `<ContentDoc />` pour afficher un fichier Markdown, seulement on ajoutant le chemin de ce fichier `.md` : 

```html
<template>
  <main>
    <ContentDoc path="/framework/vue" />
  </main>
</template>
```

Cette approche oblige le développeur à créer une page par document. Nuxt Content recommande la création d'une page [catch all route](https://nuxt.com/docs/guide/directory-structure/pages/?ref=sfeir.dev#catch-all-route) nommée `pages/[...slug].vue` qui contient le composant `<ContentDoc />` sans ajouter le chemin du document car `<ContentDoc />` prend la valeur `$route.path` par défaut :

```html
<template>
  <main>
    <!-- Similaire à <ContentDoc :path="$route.path" /> -->
    <ContentDoc />
  </main>
</template>

```

`<ContentDoc />` est composé de deux autres composants :

- `<ContentQuery />` : il cherche le document avec son chemin.
- `<ContentRenderer />` : affiche un document.

```html
<!-- Similaire à <ContentDoc :path="$route.path" /> -->
<template>
  <main>
    <ContentQuery :path="$route.path" find="one" v-slot="{ data }">
      <ContentRenderer :value="data" />
    </ContentQuery>
  </main>
</template>
```

***Composables:*** 

Le composant `<ContentQuery />` utilise `queryContent()` pour faire les requêtes à fin de récupérer les documents. 

`queryContent()` est une [composable](https://fr.vuejs.org/guide/reusability/composables.html?ref=sfeir.dev) qui prend en paramètre un chemin d'un document et retourne l'objet de ce dernier: 

```html
<script setup>
const { data } = await useAsyncData('home', () => queryContent('/home').findOne())
</script>

<template>
    <ContentRenderer :value="data" />
</template>
```

Cette composable est utile si on veut récupérer l'objet d'un document avant de l'afficher directement.

`searchContent()` est une autre composable très utile, elle cherche un mot clé dans les documents et retourne la liste des documents qui contient le mot clé trié selon un score, exemple d'usage :

```javascript
const input = ref('')
const results = await searchContent(input)
```

`useContentHead()` est une composable qui ajoute à une page web les métadonnées d'un document Markdown (la partie en syntaxe YAML). Cette composable améliore le [SEO](https://www.sfeir.dev/tendances/copywriting-lart-de-convaincre-et-convertir-dans-le-digital/), personnalise l'affichage et simplifie la gestion des métadonnées :

```html
<script setup lang="ts">
const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)

useContentHead(page)
</script>

```

Nuxt Content est une solution complète pour crée des blogs performants et personnalisables et il permet de gagner en productivité. Au-delà des fonctionnalités abordées dans cet article, Nuxt Content possède plus de fonctionnalités et de paramétrages avancés. N'hésitez pas à explorer la [documentation](https://content.nuxt.com/?ref=sfeir.dev) officielle et découvrir la nouvelle version de Nuxt Content.