---
title: "Edition"
description: "Learn how to write your documentation."
canonical_url: "https://docus.dev/en/concepts/edition"
---
# Edition

> Learn how to write your documentation.

Docus provides customization options to suit your needs.

- You can integrate it as a complete website solution with both landing and documentation sections
- Or embed the documentation functionality within your Nuxt application while maintaining full control over all other aspects (thanks to the [Nuxt layer feature](https://nuxt.com/docs/4.x/getting-started/layers)).

## Landing page

The landing page is the first page your visitors see at the root `/` of your site.

### `Markdown` (default)

By default, the landing page corresponds to the `content/index.md` file.

Docus automatically:

- Creates a `landing` content collection for the `content/index.md` file
- Registers the `/` route to render your Markdown landing page

<tip to="https://ui.nuxt.com/docs/components">

The `MDC` syntax gives you the ability to use Vue components, including slots and props in your `.md` files. You can use any Nuxt UI component in your Markdown to build your landing page.

</tip>

### `Vue` (custom)

Since Docus is a layer, it allows you to fully customize your landing page by creating a Vue page at `app/pages/index.vue` (or `app/pages/[[lang]]/index.vue` for i18n setups). This gives you full control with Vue components, custom layouts, and advanced interactions.

In this case, Docus:

- Do not create `landing` collection
- Use native Nuxt router and consider `index.vue` as your home page

<note>

This automatic detection works for both single-language and multi-language (i18n) setups.

</note>

### 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 4
  
  #description
  Powered by Nuxt 4 for optimal performances and SEO.
:::
```

### Props

Props are passed using inline syntax or YAML frontmatter within the component block:

<tabs>
<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 4
  
  #description
  Powered by Nuxt 4 for optimal performances and SEO.
:::
```

</tabs-item>

<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 4
  
  #description
  Powered by Nuxt 4 for optimal performances and SEO.
:::
```

</tabs-item>
</tabs>

<note to="https://content.nuxt.com">

Check the Nuxt Content documentation for more details about the MDC syntax

</note>

## Documentation pages

<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.

</tip>

### Without docs folder

To get started, simply edit or add a `.md` files in the `content/` directory to have your pages updated. Docus will handle routing, navigation, and full-text search automatically.

```bash
content/
├── index.md              # Landing page → /
├── getting-started.md    # Documentation → /getting-started
└── guide/
    └── introduction.md   # Documentation → /guide/introduction
```

### With docs folder

You can optionally organize your documentation files within a `docs/` subfolder. When Docus detects a `docs/` folder in your `content/` directory, it automatically prefixes all documentation URLs with `/docs`.

```bash
content/
├── index.md                  # Landing page → /
└── docs/
    ├── getting-started.md    # Documentation → /docs/getting-started
    └── guide/
        └── introduction.md   # Documentation → /docs/guide/introduction
```

<tip>

This is particularly useful when you want to use Docus as embedded documentation alongside other custom pages. You can create additional pages like a blog, contact page, pricing page, or any other custom content at the root level, while keeping your documentation organized under `/docs`.

</tip>

### Mixed content

Since Docus is a Nuxt layer, you can combine Markdown files with custom Vue pages:

```bash
├── app/
│   └── pages/
│       ├── pricing.vue       # Custom pricing page → /pricing
│       └── contact.vue       # Custom contact page → /contact
└── content/
    ├── index.md              # Landing page → /
    └── blog.md               # Blog page → /blog
    └── docs/                 # Documentation → /docs/*
        ├── getting-started.md
        └── api/
            └── reference.md
```

This structure gives you the flexibility to build a complete website with Docus. Use Markdown for documentation and Vue pages for custom functionality like blogs, dashboards, or any interactive pages.

### 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.

<tabs>
<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 -->
```

</tabs-item>

<tabs-item icon="i-lucide-eye" label="Preview">

![Frontmatter title and description](https://docus.dev/documentation/frontmatter-preview-title-description.png)

</tabs-item>
</tabs>

### 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:

<table>
<thead>
  <tr>
    <th>
      
    </th>
    
    <th>
      
    </th>
    
    <th>
      
    </th>
    
    <th>
      
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Key
    </td>
    
    <td>
      Type
    </td>
    
    <td>
      Description
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Title of the page. Displayed on top of the page. Used as SEO title if <code>
        seo
      </code>
      
       key is not provided.
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Description of the page. Displayed bellow the title on top of the page. Used as SEO description if <code>
        seo
      </code>
      
       key is not provided.
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        navigation
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Define if the page is included in left aside navigation.
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layout
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Change Nuxt layout of the page (default to <code>
        docs
      </code>
      
       defined by Docus).
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        seo
      </code>
    </td>
    
    <td>
      <code>
        { title: string, description: string }
      </code>
    </td>
    
    <td>
      SEO metas of your page.
    </td>
    
    <td>
      
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://docus.dev/sitemap.md) for all pages.