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

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

nuxt.config.ts

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:

content/index.md

# Hello Content

The module automatically loads and parses them.

Render Pages

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

pages/[...slug].vue

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

Documentation

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.

composables

Use the composables/ directory to auto-import your Vue composables into your application.

layouts

Nuxt provides a layouts framework to extract common UI patterns into reusable layouts.