Nuxt Content
Markdown-basiertes Content-Management direkt in deiner Nuxt-App
Was ist Nuxt Content?
Nuxt Content ist ein offizielles Modul, das dein Nuxt-Projekt in ein dateibasiertes CMS verwandelt. Du schreibst Inhalte in Markdown, MDX oder YAML — Nuxt Content parst sie automatisch und stellt eine Query-API bereit.
Statt einer Datenbank arbeitest du mit Dateien im content/-Verzeichnis. Perfekt für Dokumentationen, Blogs und Tutorial-Seiten wie diese hier.
Rails-Vergleich: ActionText vs Nuxt Content
In Rails nutzt du ActionText für Rich-Text-Inhalte, die in der Datenbank gespeichert werden. Nuxt Content verfolgt einen anderen Ansatz: Inhalte liegen als Dateien im Repository — versioniert mit Git, kein Datenbank-Setup nötig.
- ActionText: Rich-Text in DB, Trix-Editor, WYSIWYG
- Nuxt Content: Markdown-Dateien, Git-versioniert, Build-Time-Rendering
Installation und Setup
Installiere das Modul und füge es zur Nuxt-Konfiguration hinzu:
npx nuxi module add contentexport default defineNuxtConfig({
modules: ['@nuxt/content'],
content: {
// Syntax-Highlighting für Code-Blöcke
highlight: {
theme: 'github-dark',
langs: ['vue', 'typescript', 'ruby', 'bash', 'json']
},
// Markdown-Optionen
markdown: {
toc: { depth: 3 }
}
}
})Content-Verzeichnisstruktur
Nuxt Content liest automatisch alle Dateien im content/-Verzeichnis. Die Ordnerstruktur bestimmt die URL-Pfade:
content/
├── index.md → /
├── about.md → /about
├── blog/
│ ├── index.md → /blog
│ ├── erster-post.md → /blog/erster-post
│ └── vue-tipps.md → /blog/vue-tipps
├── docs/
│ ├── 1.einfuehrung/
│ │ ├── 1.installation.md → /docs/einfuehrung/installation
│ │ └── 2.konfiguration.md → /docs/einfuehrung/konfiguration
│ └── 2.fortgeschritten/
│ └── 1.plugins.md → /docs/fortgeschritten/plugins
└── _partial.md → wird ignoriert (beginnt mit _)Nummerierte Sortierung
Präfixe wie 1., 2. usw. steuern die Reihenfolge, erscheinen aber nicht in der URL. So behältst du die Kontrolle über die Sortierung deiner Inhalte.
Inhalte in Markdown schreiben
Jede Markdown-Datei beginnt mit einem YAML-Frontmatter-Block für Metadaten:
---
title: 'Mein erster Blog-Post'
description: 'Eine Einführung in Nuxt Content'
date: 2024-01-15
tags: ['nuxt', 'vue', 'content']
image: '/images/blog/erster-post.jpg'
author:
name: 'Max Mustermann'
avatar: '/images/authors/max.jpg'
draft: false
---
# Willkommen zu meinem Blog
Dies ist mein erster Post mit **Nuxt Content**.
## Code-Beispiele
\`
const codeExample5 = Content abfragen
Nuxt Content stellt eine mächtige Query-API bereit. Du kannst Inhalte filtern, sortieren und paginieren:
<template>
<article>
<!-- ContentRenderer zeigt den Markdown-Inhalt -->
<ContentRenderer :value="article" />
</article>
</template>
<script setup lang="ts">
const route = useRoute()
const { data: article } = await useAsyncData(
\`
const codeExample7 = Content-Komponenten
Nuxt Content stellt mehrere eingebaute Komponenten bereit, um Inhalte anzuzeigen und zu navigieren:
Markdown-Komponenten (MDC)
Mit der MDC-Syntax kannst du Vue-Komponenten direkt im Markdown verwenden. Erstelle Komponenten im components/content/-Verzeichnis und nutze sie mit der ::-Syntax:
<template>
<div class="info-kasten" :class="type">
<strong v-if="title">{{ title }}</strong>
<slot />
</div>
</template>
<script setup lang="ts">
defineProps<{
type?: 'info' | 'warnung' | 'tipp'
title?: string
}>()
</script># Markdown mit Komponenten
Normaler Text hier.
::info-kasten{type="tipp" title="Profi-Tipp"}
Diesen Inhalt rendert die InfoKasten-Komponente!
Du kannst hier auch **Markdown** verwenden.
::
Und weiter geht's mit normalem Text.Zusammenfassung
Wichtige Konzepte
- content/ — Verzeichnis für alle Markdown-Dateien
- queryContent() — Query-API zum Abfragen von Inhalten
- ContentRenderer — Rendert Markdown als HTML
- ContentDoc — All-in-One-Komponente für einzelne Seiten
- MDC-Syntax — Vue-Komponenten im Markdown verwenden
- Frontmatter — YAML-Metadaten am Anfang jeder Datei