Components Discover every component you can use in your content. 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 ]( / ). :: support same types as . v1.2 Deprecated Not found! :badge[ v1.2 ] :badge[ Deprecated ]{type="warning"} ::badge{type="danger"} Not found! :: 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 - /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. :: Play on StackBlitz :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank} support same types as . This is a callout! Click me to open. This is the content of the callout. This is a callout! Click me to open. This is the content of the callout. ::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. :: 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. :: 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. :: :: 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 ``` :: To be used inside a component to display a preview of some rendered code. Hello World! /* Added as a child of `` */ ::code-block{label="Preview" preview} ::badge Hello World! :: :: :copy-button{content="hey!"} 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"} 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 :: 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{content="nuxi build"} ::div :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"} :: html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}