Core Concepts

Edition

Learn how to write your documentation.

Docus lets you write all your content in Markdown but also provide the ability to integrate components with the 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.

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:

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

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.
:::
Check the Nuxt Content documentation for more details about the MDC syntax

Documentation pages

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

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:

KeyTypeDescription
titlestringTitle of the page. Displayed on top of the page. Used as SEO title if seo key is not provided.
descriptionstringDescription of the page. Displayed bellow the title on top of the page. Used as SEO description if seo key is not provided.
navigationbooleanDefine if the page is included in left aside navigation.
seo{ title: string, description: string }SEO metas of your page.

Migration

How to migrate your documentation from an existing Markdown solution to Docus

Configuration

Customize your Docus documentation from the Nuxt application configuration file.