694 lines
9.9 KiB
Markdown
694 lines
9.9 KiB
Markdown
# Components
|
|
|
|
Discover every component you can use in your content.
|
|
|
|
|
|
## `<Alert />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::alert{type="info" style="margin-top: 0;"}
|
|
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" style="margin-bottom: 0;"}
|
|
Check out a **danger** alert with `code` and a [link](/).
|
|
::
|
|
::
|
|
|
|
```md [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](/).
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Alert"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Alert.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<Badge />`
|
|
|
|
`<Badge />` support same types as `<Alert />`.
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::div{style="display:flex; gap: 1rem;"}
|
|
:badge[v1.2]
|
|
|
|
:badge[Deprecated]{type="warning"}
|
|
|
|
::badge{type="danger"}
|
|
Not found!
|
|
::
|
|
::
|
|
::
|
|
|
|
```md [Code]
|
|
:badge[v1.2]
|
|
|
|
:badge[Deprecated]{type="warning"}
|
|
|
|
::badge{type="danger"}
|
|
Not found!
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Badge"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Badge.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<BlockHero />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview"}
|
|
::block-hero
|
|
---
|
|
cta:
|
|
- Get started
|
|
- /introduction/getting-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.
|
|
::
|
|
::
|
|
|
|
```md [Code]
|
|
::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.
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="BlockHero"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/BlockHero.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<ButtonLink />`
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
|
|
::
|
|
|
|
```md [Code]
|
|
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Alert"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/ButtonLink.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<Callout />`
|
|
|
|
`<Callout />` support same types as `<Alert />`.
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview"}
|
|
::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.
|
|
::
|
|
::
|
|
|
|
```md [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.
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Callout"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Callout.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<Card />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview"}
|
|
::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.
|
|
::
|
|
::
|
|
|
|
```md [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.
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Card"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Card.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<CardGrid />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview"}
|
|
::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.
|
|
::
|
|
::
|
|
::
|
|
|
|
```md [Code]
|
|
::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.
|
|
::
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="CardGrid"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/CardGrid.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<CodeGroup />`
|
|
|
|
This component uses `slots` to create a tab panel of your code examples or preview.
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::code-group
|
|
```bash [Yarn]
|
|
yarn add docus
|
|
```
|
|
|
|
```bash [NPM]
|
|
npm install docus
|
|
```
|
|
::
|
|
::
|
|
|
|
```md [Code]
|
|
::code-group
|
|
```bash [Yarn]
|
|
yarn add docus
|
|
```
|
|
```bash [NPM]
|
|
npm install docus
|
|
```
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/CodeGroup.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<CodeBlock />`
|
|
|
|
To be used inside a `<CodeGroup />` component to display a preview of some rendered code.
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::badge
|
|
Hello World!
|
|
::
|
|
::
|
|
|
|
```md [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!"}
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="CodeBlock"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/CopyButton.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<Icon />`
|
|
|
|
Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org).
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
:icon{name="logos:nuxt-icon"}
|
|
:icon{name="logos:vue"}
|
|
:icon{name="logos:nuxt-icon"}
|
|
::
|
|
|
|
```md [Code]
|
|
:icon{name="logos:nuxt-icon"}
|
|
:icon{name="logos:vue"}
|
|
:icon{name="logos:nuxt-icon"}
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Icon"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Icon.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<List />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::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
|
|
::
|
|
|
|
::
|
|
|
|
```md [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
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="List"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/List.vue"
|
|
---
|
|
::
|
|
|
|
<!--
|
|
---
|
|
|
|
## `<Props />`
|
|
|
|
The props component lets you display the available props from any other component in your project.
|
|
|
|
It is powered by [nuxt-component-meta](https://github.com/nuxtlabs/nuxt-component-meta).
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::props{of="Icon"}
|
|
::
|
|
::
|
|
|
|
```md [Code]
|
|
::props{of="Icon"}
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
::props{of="Props"}
|
|
::
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Props.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
-->
|
|
## `<Sandbox />`
|
|
|
|
Embed CodeSandbox/StackBlitz easily in your documentation with great performances.
|
|
|
|
Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport.
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
|
|
::
|
|
|
|
```md [Code]
|
|
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Sandbox"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Sandbox.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<Terminal />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
:terminal{content="nuxi build"}
|
|
::
|
|
|
|
```md [Code]
|
|
:terminal{content="nuxi build"}
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="Terminal"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/Terminal.vue"
|
|
---
|
|
::
|
|
|
|
---
|
|
|
|
## `<VideoPlayer />`
|
|
|
|
::code-group
|
|
|
|
::code-block{label="Preview" preview}
|
|
::div
|
|
:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
|
|
::
|
|
::
|
|
|
|
```md [Code]
|
|
::div
|
|
:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
|
|
::
|
|
```
|
|
|
|
::
|
|
|
|
<!--
|
|
::props{of="VideoPlayer"}
|
|
::
|
|
-->
|
|
|
|
::source-link
|
|
---
|
|
source: "components/content/VideoPlayer.vue"
|
|
---
|
|
::
|