content

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.

::read-more{to="https://content.nuxt.com" target="_blank"} 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:

```bash [Terminal] npx nuxt module add content

## Create Content

Place your markdown files inside the `content/` directory:

```md [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 <ContentRenderer> component:

```vue [app/pages/[...slug\].vue]

```

Documentation#

::tip{ icon="i-lucide-book" } 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. ::