Edition

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

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

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

Components

MDC provides a dedicated syntax to easily use Vue components in your content:

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

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

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

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

Documentation pages

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.

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.

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

Mixed content

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

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

CodePreview

content/getting-started/edition.md

---
title: 'Edition'
description: 'Learn how to write your documentation.'
---

<!-- Content of the page in pure Markdown -->

Parameters

Pages in the /content directory are defined as page type in Nuxt Content. They all follow the same structure with existing frontmatter keys: