Skip to main content
Docus provides multiple ways to create and edit your documentation, from writing Markdown files locally to using the integrated Nuxt Studio editor.

​
Content Structure

Docs content lives in the content/ directory. Docus uses Nuxt Content’s collection system to organize pages. 
content/
├── index.md           # Landing page
└── docs/              # Documentation pages
    ├── getting-started.md
    └── guide.md
The content structure automatically adapts based on whether i18n is enabled in your Nuxt config.

​
Writing with Markdown

Create new pages by adding .md or .mdx files in your content directory:
[content/docs/my-page.md]
---
title: My Page Title
description: A brief description for SEO
---

# My Page Title

Your content goes here...

​
Frontmatter

Every page should include frontmatter with metadata:
​
title
string
required
Page title shown in navigation and SEO
​
description
string
Page description for SEO and previews
​
links
array
Custom links displayed in the page header

​
MDC Syntax

Docus uses MDC (Markdown Components) powered by Nuxt Content, allowing you to use Vue components directly in Markdown: 
::card{title="Featured Card"}
This is a card component used inline in Markdown.
::

:badge[New Feature]
1

Enable MDC

MDC is enabled by default through the Nuxt Content configuration:
[nuxt.config.ts]
export default defineNuxtConfig({
  content: {
    build: {
      markdown: {
        remarkPlugins: {
          'remark-mdc': {
            options: {
              autoUnwrap: true,
            },
          },
        },
      },
    },
  },
})
2

Use Components

Reference any component from your components/ directory or Nuxt UI:
::alert{type="warning"}
This is a warning message
::
3

Add Props

Pass props using the curly brace syntax:
::button{to="/docs" color="primary" size="lg"}
Get Started
::

​
Editing with Nuxt Studio

Nuxt Studio provides a visual editor for your Docus documentation with live preview and collaborative features.

​
Setup Studio

Configure Nuxt Studio in your nuxt.config.ts:
[nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['nuxt-studio'],
  studio: {
    route: '/admin',
    repository: {
      provider: 'github',
      owner: 'your-org',
      repo: 'your-repo',
      rootDir: 'docs',
    },
  },
})
​
studio.route
string
default:"/admin"
URL path where Studio admin interface is accessible
​
studio.repository.provider
string
required
Git provider: github, gitlab, or bitbucket
​
studio.repository.rootDir
string
Root directory containing your content files

​
Studio Features

Visual Editor

Edit Markdown with a rich WYSIWYG interface

Live Preview

See changes instantly with hot reload

Schema Validation

Validate frontmatter using Nuxt Schema

Media Library

Upload and manage images and assets

​
GitHub Integration

Enable “Edit this page” links by configuring GitHub settings:
[app.config.ts]
export default defineAppConfig({
  github: {
    url: 'https://github.com/your-org/your-repo',
    branch: 'main',
    rootDir: 'docs',
  },
})
​
github.url
string
Full GitHub repository URL
​
github.branch
string
default:"main"
Branch where content files are stored
​
github.rootDir
string
Root directory path within the repository
The GitHub configuration is automatically inferred from your Git repository if not explicitly set.

​
AI-Powered Editing

Docus includes an AI assistant to help with documentation:
[app.config.ts]
export default defineAppConfig({
  assistant: {
    explainWithAi: true,
    floatingInput: true,
    shortcuts: {
      focusInput: 'meta_i',
    },
  },
})
Click the “Explain with AI” button to get contextual explanations of documentation sections.

​
Content Collections

Docus automatically configures content collections based on your setup:
[content.config.ts]
import { defineContentConfig, defineCollection, z } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    docs: defineCollection({
      type: 'page',
      source: {
        include: 'docs/**',
        prefix: '/docs',
      },
      schema: z.object({
        links: z.array(z.object({
          label: z.string(),
          icon: z.string(),
          to: z.string(),
          target: z.string().optional(),
        })).optional(),
      }),
    }),
  },
})
When using i18n, collections are automatically created for each locale with the pattern docs_{locale_code}.

​
Next Steps

Markdown Syntax

Learn advanced Markdown features

Components

Use built-in components in your docs

Build docs developers (and LLMs) love

Get started for freeTalk to us