content

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.

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.

  • 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:

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