Nuxt/docs/content/2.guide/2.directory-structure/1.content.md

icon	title	head.title
IconDirectory	content	Content Directory

Content Directory

The Nuxt Content module reads the content/ directory in your project and parses .md, .yml, .csv and .json files to create a file-based CMS for your application.

::list{type=success}

• Render your content with built-in components.
• Query your content with a MongoDB-like API.
• Use your Vue components in Markdown files with the MDC syntax.
• Automatically generate your navigation.

::

Get Started

Installation

Install the @nuxt/content module in your project:

::code-group

yarn add --dev @nuxt/content

npm install --save-dev @nuxt/content

pnpm add -D @nuxt/content

::

Then, add @nuxt/content to the modules section of nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

Create Content

Place your markdown files inside the content/ directory in the root directory of your project:

# Hello Content

The module automatically loads and parses them.

Render Pages

To render content pages, add a catch-all route using the ContentDoc component:

<template>
  <main>
    <ContentDoc />
  </main>
</template>

Documentation

::alert{type=info} Head over to https://content.nuxtjs.org to learn more about the Content module features, such as how to build queries and use Vue components in your Markdown files with the MDC syntax. ::