Getting Started with Docus

Docus and Markdown

Docus feature, markdown and component

Header 1

Header 2 {#custom-id}

bold text

blockquote message

italicized text

--- (This is a horizontal line)

code

Markdown Guide

# Header 1

## Header 2 {#custom-id}

**bold text**

> blockquote message

_italicized text_

--- (This is a horizontal line)

`code`

[Markdown Guide](https://www.markdownguide.org)

List

First item
Second item

First item
Second item
- x
- y

1. First item
2. Second item

- First item
- Second item
  - x
  - y

Image

![alt text](https://www.markdownguide.org/assets/images/tux.png)

# For custom style (Nuxt Content)

![alt text](https://www.markdownguide.org/assets/images/tux.png){.mx-auto .block .w-auto}

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

Syntax	Description
Header	Title
Paragraph	Text

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

term : definition Here's a sentence with a footnote. Look at the footnote at the bottom of the page. ^1~~The world is flat.~~

Tasklist example
Tasklist example

That is so funny! 😂

I need to highlight these ==very important words==.

H2O X^2^

term
: definition
Here's a sentence with a footnote. Look at the footnote at the bottom of the page. [^1]
~~Strikethrough.~~

- [x] Tasklist example
- [ ] Tasklist example

That is so funny! :joy:

I need to highlight these ==very important words==.

H~2~O X^2^ # Subscript and Superscript

Programming Language

Declare the codeblock with the language's code to auto format in codeblock.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxt/ui"],
});

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ["@nuxt/ui"],
});
```

MDC (Nuxt Specific Markdown Component)

:: used to declare a special component in the md file. # used to define a named slot.

Code Preview

The code below show how it will be displayed in the final page.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxt/ui"],
});

::::code-preview

class: "[&>div]:_:my-0 [&>div]:_:w-full"

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})
```
::::

Tip

Icons are already defined by default, but you can customize them in your app.config.ts:

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      codeIcon: {
        terminal: "i-ph-terminal-window-duotone",
      },
    },
  },
});

CodeGroup

Group code blocks in tabs using code-group. code-group is perfect for showing code examples in multiple languages or package managers.

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

:::code-group

```bash [pnpm]
pnpm add @nuxt/ui
```

```bash [yarn]
yarn add @nuxt/ui
```

```bash [npm]
npm install @nuxt/ui
```

```bash [bun]
bun add @nuxt/ui
```
:::

CodeTree

Display code blocks in a file tree view using code-tree. code-tree is excellent for showcasing project structures and file relationships.

app/app.config.ts

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
})

::code-tree
...
::

Use code-preview to show code output alongside the code. code-preview is ideal for interactive examples and demonstrating code results. Write the code to be previewed in the default slot and the actual code in the #code slot.

inline code

`inline code`

::code-preview
`inline code`

#code
```mdc
`inline code`
```
::

CodeCollapse

Use code-collapse for long code blocks to keep pages clean. code-collapse allows users to expand code blocks only when needed, improving readability.

main.css

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: "Public Sans", sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #effdf5;
  --color-green-100: #d9fbe8;
  --color-green-200: #b3f5d1;
  --color-green-300: #75edae;
  --color-green-400: #00dc82;
  --color-green-500: #00c16a;
  --color-green-600: #00a155;
  --color-green-700: #007f45;
  --color-green-800: #016538;
  --color-green-900: #0a5331;
  --color-green-950: #052e16;
}

::code-collapse

```css [main.css]
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}
```
::

`Accordion`

Use the accordion and accordion-item components to display an Accordion in your content.

::accordion

:::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
Docus is a fully integrated documentation solution built with Nuxt UI. It's a theme based on the UI documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
:::

:::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
:::

:::accordion-item{label="What is Nuxt UI?" icon="i-lucide-circle-help"}
[Nuxt UI](https://ui.nuxt.com/) is a collection of premium Vue components, composables and utils.
:::
::

`Collapsible`

Wrap your content with the collapsible component to display a Collapsible in your content.

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::collapsible
| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
::

Callout

Here's some additional information for you.

Here's a helpful suggestion.

Be careful with this action as it might have unexpected results.

This action cannot be undone.

::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action as it might have unexpected results.
::

::caution
This action cannot be undone.
::

Card and CardGroup

Card group together in a grid layout.

Dashboard

A dashboard with multi-column layout.

SaaS

A template with landing, pricing, docs and blog.

Docs

A documentation with @nuxt/content.

Landing

A landing page you can use as starting point.

:::card-group

::card
---
title: Dashboard
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/dashboard
target: _blank
---
A dashboard with multi-column layout.
::

::card
---
title: SaaS
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/saas
target: _blank
---
A template with landing, pricing, docs and blog.
::

::card
---
title: Docs
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/docs
target: _blank
---
A documentation with `@nuxt/content`.
::

::card
---
title: Landing
icon: i-simple-icons-github
to: https://github.com/nuxt-ui-templates/landing
target: _blank
---
A landing page you can use as starting point.
::

:::

Custom Components

Icon

In the Docus and Nuxt UI ecosystem, icons are powered by Iconify. It's coded as i-<source>-<icon-name>. In default, nuxt use lucide icons. We can add custom icons by configuring nuxt.config.ts. View Icones to view all available icons.

Icon Name	Icon
`i-lucide-github`
`i-mdi-github`
`i-logos-vue`

Styles on Markdown

The framework use standard tailwindcss for styling. Simply wrap the text with [] and add the style with {}. Example: [styled text]{.text-primary.font-bold}.

Mermaid Diagrams

Mermaid allows you to create diagrams and visualizations using text and code. name must be provided.

::mermaid{name="demo-diagram" width="400px"}
graph TD
A[MDC Syntax] --> B[generate-mermaid.mjs]
B --> C[public/mermaid/demo-diagram.svg]
C --> D[Mermaid.vue]
::

docs.editcommon.ordocs.report

Docus Introduction

How I manage my documentation with minimal effort with Docus.

Python

Comprehensive guide to Python syntax, data structures, libraries, and tools.