124 lines
4.6 KiB
Markdown
124 lines
4.6 KiB
Markdown
---
|
|
title: Edition
|
|
description: Learn how to write your documentation.
|
|
navigation:
|
|
icon: i-lucide-pencil
|
|
seo:
|
|
description: Learn how to write your documentation with Docus and Nuxt Content.
|
|
---
|
|
|
|
Docus lets you write all your content in **Markdown** but also provide the ability to integrate **components** with the [MDC syntax](https://content.nuxt.com/docs/files/markdown#mdc-syntax) provided by **Nuxt Content**.
|
|
|
|
## Landing page
|
|
|
|
The landing corresponds to the `index.md` file. `MDC` syntax supercharges Markdown with the ability to use Vue components including slots and props inside your `.md` files.
|
|
|
|
::prose-tip{to="/essentials/components"}
|
|
Check the list of Nuxt UI prose components you can integrate in your Markdown.
|
|
::
|
|
|
|
### Components
|
|
|
|
MDC provides a dedicated syntax to easily use Vue components in your content:
|
|
|
|
```mdc [content/index.md]
|
|
:::u-page-feature
|
|
:::
|
|
```
|
|
|
|
### Slots
|
|
|
|
Slots can receive text content or other components.
|
|
|
|
- **Default slot** is rendered directly inside the component or with `#default`.
|
|
- **Named slots** are defined using the `#` symbol followed by the slot name.
|
|
|
|
```mdc [index.md]
|
|
:::u-page-feature
|
|
#title
|
|
Nuxt 3
|
|
|
|
#description
|
|
Powered by Nuxt 3 for optimal performances and SEO.
|
|
:::
|
|
```
|
|
|
|
### Props
|
|
|
|
Props are passed using inline syntax or YAML frontmatter within the component block:
|
|
|
|
::prose-tabs
|
|
:::prose-tabs-item{icon="i-lucide-braces" label="Inline"}
|
|
```mdc [index.md]
|
|
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"}
|
|
#title
|
|
Nuxt 3
|
|
|
|
#description
|
|
Powered by Nuxt 3 for optimal performances and SEO.
|
|
:::
|
|
```
|
|
:::
|
|
|
|
:::prose-tabs-item{icon="i-lucide-code" label="YAML"}
|
|
```mdc [index.md]
|
|
:::u-page-feature
|
|
---
|
|
icon: i-simple-icons-nuxt
|
|
to: https://nuxt.com
|
|
---
|
|
#title
|
|
Nuxt 3
|
|
|
|
#description
|
|
Powered by Nuxt 3 for optimal performances and SEO.
|
|
:::
|
|
```
|
|
:::
|
|
::
|
|
|
|
::prose-note{to="https://content.nuxt.com"}
|
|
Check the Nuxt Content documentation for more details about the MDC syntax
|
|
::
|
|
|
|
## Documentation pages
|
|
|
|
::prose-tip
|
|
There is a one to one relationship between content files and pages on your site. Each Markdown page in the `content/` folder maps directly to a page route.
|
|
::
|
|
|
|
To get started, simply edit or add a `.md` files in the [`content/`](https://content.nuxt.com/usage/content-directory) directory to have your pages updated. Docus will handle routing, navigation, and full-text search automatically.
|
|
|
|
### Frontmatter
|
|
|
|
Every file of the `content/` folder starts with the `---` syntax on top of the page. It corresponds to the frontmatter of your file which is a convention of Markdown-based CMS to provide meta-data to pages.
|
|
|
|
::prose-tabs
|
|
:::prose-tabs-item{icon="i-lucide-code" label="Code"}
|
|
```md [content/getting-started/edition.md]
|
|
---
|
|
title: 'Edition'
|
|
description: 'Learn how to write your documentation.'
|
|
---
|
|
|
|
<!-- Content of the page in pure Markdown -->
|
|
```
|
|
:::
|
|
|
|
:::prose-tabs-item{icon="i-lucide-eye" label="Preview"}
|
|
{.rounded-lg}
|
|
:::
|
|
::
|
|
|
|
### Parameters
|
|
|
|
Pages in the `/content` directory are defined as [page](https://content.nuxt.com/docs/collections/types#page-type) type in Nuxt Content. They all follow the same structure with existing frontmatter keys:
|
|
|
|
| | | | |
|
|
| ------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | - |
|
|
| Key | Type | Description | |
|
|
| `title` | `string` | Title of the page. Displayed on top of the page. Used as SEO title if `seo` key is not provided. | |
|
|
| `description` | `string` | Description of the page. Displayed bellow the title on top of the page. Used as SEO description if `seo` key is not provided. | |
|
|
| `navigation` | `boolean` | Define if the page is included in left aside navigation. | |
|
|
| `seo` | `{ title: string, description: string }` | SEO metas of your page. | |
|