Editing 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

content/
├── en/
│   ├── index.md      # English landing
│   └── docs/         # English docs
└── fr/
    ├── index.md      # French landing
    └── docs/         # French docs

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:

string

required

Page title shown in navigation and SEO

string

Page description for SEO and previews

array

Custom links displayed in the page header

Link Object Schema

{
  label: string
  icon: string
  to: string
  target?: string
}

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]

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,
            },
          },
        },
      },
    },
  },
})

Use Components

Reference any component from your components/ directory or Nuxt UI:

::alert{type="warning"}
This is a warning message
::

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',
    },
  },
})

string

default:"/admin"

URL path where Studio admin interface is accessible

string

required

Git provider: github, gitlab, or bitbucket

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',
  },
})

string

Full GitHub repository URL

string

default:"main"

Branch where content files are stored

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',
    },
  },
})

Explain with AI
Floating Input
Smart Search

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

Get Started

Concepts

Essentials

AI Features

Editing Content

Content Structure

Writing with Markdown

Frontmatter

MDC Syntax

Editing with Nuxt Studio

Setup Studio

Studio Features

Visual Editor

Live Preview

Schema Validation

Media Library

GitHub Integration

AI-Powered Editing

Content Collections

Next Steps

Markdown Syntax

Components

​Content Structure

​Writing with Markdown

​Frontmatter

​MDC Syntax

​Editing with Nuxt Studio

​Setup Studio

​Studio Features

Visual Editor

Live Preview

Schema Validation

Media Library

​GitHub Integration

​AI-Powered Editing

​Content Collections

​Next Steps

Markdown Syntax

Components

Content Structure

Writing with Markdown

Frontmatter

MDC Syntax

Editing with Nuxt Studio

Setup Studio

Studio Features

GitHub Integration

AI-Powered Editing

Content Collections

Next Steps