Docs Ref
Components
Discover every component you can use in your content.
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](/en/).
::
::alert{type="success"}
Check out a **success** alert with `code` and a [link](/en/).
::
::alert{type="warning"}
Check out a **warning** alert with `code` and a [link](/en/).
::
::alert{type="danger"}
Check out a **danger** alert with `code` and a [link](/en/).
::
<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.
::block-hero
---
cta:
- Get started
- /en/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.
::
<ButtonLink />
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
<Callout />
<Callout /> support same types as <Alert />.
::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.
::card{icon="lucide:box"}
#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.
Vue Components.
Write Markdown.
::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
npm install docus
::
<CodeBlock />
To be used inside a <CodeGroup /> component to display a preview of some rendered code.
::
/* Added as a child of `<CodeGroup />` */
::code-block{label="Preview" preview}
::badge
Hello World!
::
::
<!--
::props{of="CodeBlock"}
::
-->
::source-link
---
source: "components/content/CodeBlock.vue"
---
::
---
## `<CopyButton />`
::code-group
::code-block{label="Preview" preview}
:copy-button{content="hey!"}
::
```md [Code]
:copy-button{content="hey!"}
::
<Icon />
Icon component gives you access to all 100,000+ icons from icones.js.org.
:icon{name="lucide:box"}
:icon{name="lucide:triangle"}
:icon{name="lucide:box"}
<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.
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
<Terminal />
Bash
$nuxi build:terminal{content="nuxi build"}
<VideoPlayer />
::div
:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::