---
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"}
  ![Frontmatter title and description](/documentation/frontmatter-preview-title-description.png){.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.                                                                                                       |   |