Docus

All components are available in Docus and you can use them in your markdown files.

<Alert />

Check out an info alert with code and a link.
Check out a success alert with code and a link.
Check out a warning alert with code and a link.
Check out a danger alert with code and a link.
Code
::alert{type="info"}
Check out an **info** alert with `code` and a [link](/).
::

::alert{type="success"}
Check out a **success** alert with `code` and a [link](/).
::

::alert{type="warning"}
Check out a **warning** alert with `code` and a [link](/).
::

::alert{type="danger"}
Check out a **danger** alert with `code` and a [link](/).
::

<Badge />

<Badge /> support same types as <Alert />.

v1.2DeprecatedNot found!
Code
:badge[v1.2]

:badge[Deprecated]{type="warning"}

::badge{type="danger"}
Not found!
::

Code
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}

<Callout />

<Callout /> support same types as <Alert />.

This is a callout! Click me to open.

This is a callout! Click me to open.

Code
::callout
#summary
This is a callout! Click me to open.

#content
This is the content of the callout.
::

::callout{type="warning"}
#summary
This is a callout! Click me to open.

#content
This is the content of the callout.
::

<Card />

Nuxt Architecture.

Based on Nuxt 3 and Nuxt Content.
Use Nuxt to build a static site, or a serverless app.

Code
 ::card{icon="logos:nuxt-icon"}
 #title
 Nuxt Architecture.
 #description
 Based on **Nuxt 3** and **Nuxt Content**. :br
 Use Nuxt to build a static site, or a serverless app.
 ::

<CodeGroup />

This component uses slots to create a tab panel of your code examples or preview.

Yarn
yarn add docus
NPM
npm install docus
Code
::code-group
  ```bash [Yarn]
  yarn add docus
  ```
  ```bash [NPM]
  npm install docus
  ```
::

<CodeBlock />

To be used inside a <CodeGroup /> component to display a preview of some rendered code.

Hello World!
Code
/* Added as a child of `<CodeGroup />` */

::code-block{label="Preview" preview}
  ::badge
  Hello World!
  ::
::

<CopyButton />

Code
:copy-button{content="hey!"}

<List />

  • Important
  • Always
  • Amazing
  • Congrats
  • Do you know?
  • You can also do this
  • Be careful
  • Use with precautions
  • Drinking too much
  • Driving drunk
Code
::list{type="primary"}
- **Important**
- Always
::

::list{type="success"}
- Amazing
- Congrats
::

::list{type="info"}
- Do you know?
- You can also do this
::

::list{type="warning"}
- Be careful
- Use with precautions
::

::list{type="danger"}
- Drinking too much
- Driving drunk
::

<Sandbox />

Embed CodeSandbox/StackBlitz easily in your documentation with great performances.

Using the IntersectionObserver to load when visible in the viewport.

Loading Sandbox...
Code
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}

<Terminal />

Bash
$nuxi build
Click to copy
Code
:terminal{content="nuxi build"}

<VideoPlayer />

Code
::div
  :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::

Table of Contents