mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
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:
parent
c95a48c632
commit
58ca6c17f2
83
docs/content/2.guide/3.directory-structure/6.content.md
Normal file
83
docs/content/2.guide/3.directory-structure/6.content.md
Normal 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.
|
||||
::
|
Loading…
Reference in New Issue
Block a user