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

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

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

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

::card-grid #title What'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 add docus
npm install docus
::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!
/* Added as a child of `<CodeGroup />` */ ::code-block{label="Preview" preview} ::badge Hello World! :: ::

<CopyButton />

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

<Icon />

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

: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
::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...
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}

<Terminal />

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

<VideoPlayer />

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

Edit this page on GitHub
Table of Contents