Getting Started with Nuxt Content

20 January 2024

Nuxt Content is a powerful module that allows you to write your content in Markdown, YAML, CSV, or JSON files and query them like a database.

Installation

First, install the module:

npm install @nuxt/content

Then add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

Create a content/ directory in your project root. Any Markdown files you add here will be automatically available to query.

---
title: "My First Post"
date: 2024-01-01
description: "This is my first blog post"
---

# Hello World

Welcome to my blog!

Use the queryContent() composable to fetch your content:

<script setup>
const { data: posts } = await useAsyncData('posts', () =>
  queryContent('blog')
    .sort({ date: -1 })
    .find()
)
</script>

Use the <ContentRenderer> component to render your Markdown:

<ContentRenderer :value="post" />

That's it! You now have a fully functional blog with Nuxt Content.