How to Fetch Nuxt Content Data and Render It in a Nuxt Page

Note: This article describes Nuxt Content v2 and Nuxt 3 APIs, which differ from the Nuxt Content v3 setup used by this site. Check the documentation for the versions in your project before applying the examples.

Introduction

Nuxt Content lets you manage Markdown and other content files alongside your application. This guide introduces the Nuxt Content v2 workflow for installing the module, configuring it, creating content, and rendering a document in a page.

Step 1: Install Nuxt Content

Install the module in your Nuxt 3 project:

npm install @nuxt/content

Step 2: Configure the module

Add @nuxt/content to the modules array in your existing nuxt.config.ts:

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

Step 3: Create a content file

Create a Markdown file under the content/ directory, for example content/hello.md:

---
title: Hello, world!
---

# Welcome to Nuxt Content

This is an example Markdown document.

Step 4: Query and render the document

In a page such as pages/[...slug].vue, query the route and pass the resulting document to ContentDoc:

<script setup lang="ts">
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

<template>
  <main>
    <ContentDoc :path="$route.path" />
  </main>
</template>

The query result can also be used to show fields such as the title or description in your page layout. Refer to the Nuxt Content v2 documentation for the complete API and migration details.