docs: add content directory to directory-structure (#5755)

Co-authored-by: Damian <48835293+DamianGlowala@users.noreply.github.com>
Co-authored-by: Pooya Parsa <pooya@pi0.io>
This commit is contained in:
Clément Ollivier 2022-07-07 20:27:34 +02:00 committed by GitHub
parent c95a48c632
commit 58ca6c17f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 83 additions and 0 deletions

View File

@ -0,0 +1,83 @@
---
icon: IconDirectory
title: 'content'
head.title: Content directory
---
# Content directory
The [Nuxt Content module](https://content.nuxtjs.org) reads the `content/` directory in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.
::list{type=success}
- 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:
::code-group
```bash [yarn]
yarn add --dev @nuxt/content
```
```bash [npm]
npm install --save-dev @nuxt/content
```
```bash [pnpm]
pnpm add -D @nuxt/content
```
::
Then, add `@nuxt/content` to the `modules` section of `nuxt.config.ts`:
```ts [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:
```md [content/index.md]
# Hello Content
```
The module automatically loads and parses them.
### Render pages
To render content pages, add a [catch-all route](/guide/directory-structure/pages/#catch-all-route) using the `ContentDoc` component:
```vue [pages/[...slug].vue]
<template>
<main>
<ContentDoc />
</main>
</template>
```
## Documentation
::alert{type=info}
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.
::