Components

Discover every component you can use in your content.

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


<BlockHero />

Document-driven framework

Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.

Bash
$npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
Click to copy
Code
::block-hero---cta:  - Get started  - /get-startedsecondary:  - Open on GitHub →  - https://github.com/nuxtlabs/docussnippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter---#titleDocument-driven framework#descriptionDocus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.::


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#summaryThis is a callout! Click me to open.#contentThis is the content of the callout.:: ::callout{type="warning"}#summaryThis is a callout! Click me to open.#contentThis 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. ::


<CardGrid />

What's included?

Nuxt Architecture.

Harness the full power of Nuxt and the Nuxt ecosystem.

Vue Components.

Use built-in components (or your own!) inside your content.

Write Markdown.

Enjoy the ease and simplicity of Markdown and discover MDC syntax.

Code
::card-grid#titleWhat's included#root:ellipsis#default  ::card  #title  Nuxt Architecture.  #description  Harness the full power of Nuxt and the Nuxt ecosystem.  ::  ::card  #title  Vue Components.  #description  Use built-in components (or your own!) inside your content.  ::  ::card  #title  Write Markdown.  #description  Enjoy the ease and simplicity of Markdown and discover MDC syntax.  ::::


<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!"}


<Icon />

Icon component gives you access to all 100,000+ icons from icones.js.org.

Code
:icon{name="logos:nuxt-icon"}:icon{name="logos:vue"}:icon{name="logos:nuxt-icon"}


<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"}::