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 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 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.
Pour illustrer les avantages de Nuxt Content, nous allons créer, étape par étape, un blog fonctionnel.
- Installation:
On commence par la création d'un projet Nuxt.js avec la commande :
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
yarn add @nuxt/contentexport default {
modules: ['@nuxt/content']
}Nuxt Content nécessite l'activation de l'option Rendu côté serveur de Nuxt :
export default {
...
ssr: true
}- 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 :
content/
frameworks/
vue.md
nuxt.md
examples/
vercel.md
netlify.md
heroku.md
index.mdNuxt content se charge de générer les chemins des articles :
/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:
export default defineNuxtConfig({
content: {
api: {
baseURL: '/api/_my_content'
}
}
})- Création des articles:
Nuxt Content utilise la convention Front-matter , 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 :
---
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 ou des props.
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é.
::card
cette partie sera afficher dans la partie slot.
::<!-- 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 #.
::card
cette partie sera afficher dans la partie slot.
#description
cette partie sera afficher dans la partie description.
::<!-- 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:
::alert{type="warning"}
The alert component.
::<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, ...
- 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 :
<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 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 :
<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.
<!-- 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 qui prend en paramètre un chemin d'un document et retourne l'objet de ce dernier:
<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 :
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, personnalise l'affichage et simplifie la gestion des métadonnées :
<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 officielle et découvrir la nouvelle version de Nuxt Content.
