54.9K

DocsGuideDirectory Structure

content

Use the content/ directory to create a file-based CMS for your application.

Nuxt Content 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.
Learn more in Nuxt Content documentation.

Enable Nuxt Content

Install the @nuxt/content module in your project as well as adding it to your nuxt.config.ts with one command:

Terminal
npx nuxi module add content

Create Content

Place your markdown files inside the content/ directory:

content/index.md
# Hello Content

The module automatically loads and parses them.

Render Content

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

pages/[...slug].vue
<template>  <main>    <ContentDoc :path="$route.path" />  </main></template>

Documentation

Head over to https://content.nuxt.com 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.