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

54 lines
1.6 KiB
Markdown
Raw Normal View History

---
title: 'content'
head.title: 'content/'
description: Use the content/ directory to create a file-based CMS for your application.
navigation.icon: i-ph-folder-duotone
---
[Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/guide/directory-structure/content) 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 nuxi 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](/docs/guide/directory-structure/pages/#catch-all-route) using the [`<ContentDoc>`](https://content.nuxt.com/components/content-doc) component:
```vue [pages/[...slug\\].vue]
<template>
<main>
<ContentDoc :path="$route.path" />
</main>
</template>
```
## Documentation
::callout
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.
::