Créer un blog avec Nuxt Content et Tailwind Typography

Introduction

Dans ce tutoriel, vous allez créer un blog simple à l’aide de et . Vous créerez une page listant vos articles, la page de visualisation des articles, un en-tête et un pied de page. Vous retrouverez quelques idées pour aller plus loin à la fin de cet article.

Pour mener à bien la création de ce blog, vous aurez besoin de certains prérequis :

  • Être familier avec les languages du web et l’utilisation du terminal,
  • Avoir installé sur votre machine (version 18.0.0 ou supérieure),
  • Posséder un éditeur de texte tel que ou (j’utiliserais Visual Studio Code dans mes exemples).
Ce tutoriel a été écrit à l’origine pour Nuxt Content v2. Une réécriture pour la v3 est prévue.

Création de la base du projet

Commençons sans tarder par initialiser un projet Nuxt Content en utilisant le template fourni par Nuxt :

Terminal
npx nuxi@latest init blog -t content --packageManager npm --gitInit

Ensuite, installons TailwindCSS puis Tailwind Typography :

Terminal
npx nuxi@latest module add tailwindcss
npm install @tailwindcss/typography
npx tailwindcss init --ts

Ouvrons notre projet dans Visual Studio Code pour poursuivre la configuration :

Terminal
code blog

Configurons Tailwind :

tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
} satisfies Config
assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Et rajoutons quelques options facultatives à la configuration de Nuxt Content :

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxt/content'],
  routeRules: {
    '/': { prerender: true }
  },
  content: {
    // Permet d'avoir des blocs de code en couleur
    highlight: {
      theme: 'github-light'
    },
    // Définir la langue de notre blog
    defaultLocale: "fr-FR"
  },
})

En l’état, votre blog est fonctionnel. Vous pouvez l’essayer en lançant Nuxt :

npm run dev -- --open

Création des pages

Page d’accueil

Commençons par créer notre page d’accueil. Elle sera composée d’un en-tête avec le nom de notre blog, de la liste des articles qui le compose puis d’un pied de page.

Agencement de la page d'accueil Cliquer pour voir toute l'image
Agencement de la page d'accueil

Nous allons commencer par créer un nouveau fichier Vue qui correspondra à notre page d’accueil :

pages/index.vue
<script setup lang="ts">
  const {data: navigation} = await useAsyncData('navigation', () => fetchContentNavigation())
</script>

<template>
  <Head>
    <Title>Mon blog</Title>
  </Head>

  <main class="2xl:max-w-[1400px] p-8 w-full mx-auto min-h-screen">
    <NavBar />

    <section v-if="navigation" class="mt-16">
      <div class="prose">
        <h1 class="my-8">Articles</h1>
      </div>
      <div class="flex flex-col">
        <NuxtLink
          v-for="(page, index) in navigation"
          :key="page.title"
          :to="page._path"
          class="prose"
          :class="index !== navigation.length - 1 ? 'mb-4 pb-4 border-b' : ''"
        >
          <h3>{{ page.title }}</h3>
        </NuxtLink>
      </div>
    </section>
  </main>
  <Footer />
</template>
components/NavBar.vue
<template>
  <nav class="font-semibold text-lg">
    Mon Blog
  </nav>
</template>
components/Footer.vue
<template>
  <footer class="xl:max-w-[900px] px-8 py-2 mt-8 text-xs opacity-80 mx-auto text-center">
    Mon Blog &copy; 2024 - Tous droits réservés
  </footer>
</template>

Nous avons créé ici trois fichiers :

  • index.vue : ce fichier correspond à la page d’accueil de notre site.
  • NavBar.vue et Footer.vue : ces fichiers sont des composants qui contiennent du code que nous pourrons réutiliser à plusieurs endroits sans duplications.

Maintenant, vous avez une page d’accueil fonctionnelle qui affichera tous les articles que vous ajouterez au dossier content/.

Page de visualisation

Vient ensuite la page la plus importante du blog : la page de l’article

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data } = await useAsyncData('page', () => queryContent(route.path).findOne())
</script>

<template>
  <Head>
    <Title>{{ data?.title }}</Title>
  </Head>

  <main class="2xl:max-w-[1400px] p-8 w-full mx-auto min-h-screen">
    <NavBar />

    <article v-if="data" class="mt-16 prose lg:prose-xl mx-auto">
      <ContentRenderer :value="data" />
    </article>
  </main>
  <Footer />
</template>

Félicitations, vous avez créé votre blog avec Nuxt Content et Tailwind Typography !

Pour aller plus loin

Voici quelques idées de ce qui pourrait être amélioré dans votre blog (classées par ordre de difficulté) :

  • Ajouter des suggestions d’articles populaires à la fin de chaque article pour créer plus d’engagement de la part de vos utilisateurs.
  • Personnaliser certains éléments de typographie de vos articles tels que la couleur des liens.
  • Ajouter une table des matières sur la gauche des articles pour aider le lecteur à se repérer.
  • Ajouter des propriétés personnalisées telles que description et cover à vos articles pour créer une page d’accueil plus engageante.

Table des matières

© Nolhan 2025 - Tous droits réservés