Skip to content

Latest commit

 

History

History
693 lines (524 loc) · 9.9 KB

1.components.md

File metadata and controls

693 lines (524 loc) · 9.9 KB
Raw

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](/).
::

::

::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](/).
::

::

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

::

:badge[v1.2]

:badge[Deprecated]{type="warning"}

::badge{type="danger"}
Not found!
::

::

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

::

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

::

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

:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}

::

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

::

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

::

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

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

::

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

::

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

::

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

::

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

/* Added as a child of `<CodeGroup />` */

::code-block{label="Preview" preview}
  ::badge
  Hello World!
  ::
::

::

::source-link

source: "components/content/CodeBlock.vue"

::

<CopyButton />

::code-group

::code-block{label="Preview" preview} :copy-button{content="hey!"} ::

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

::

::source-link

source: "components/content/CopyButton.vue"

::

<Icon />

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

::code-group

::code-block{label="Preview" preview} :icon{name="logos:nuxt-icon"} :icon{name="logos:vue"} :icon{name="logos:nuxt-icon"} ::

:icon{name="logos:nuxt-icon"}
:icon{name="logos:vue"}
:icon{name="logos:nuxt-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
::

::

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

::

::source-link

source: "components/content/List.vue"

::

<Sandbox />

Embed CodeSandbox/StackBlitz easily in your documentation with great performances.

Using the IntersectionObserver 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"} ::

:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}

::

::source-link

source: "components/content/Sandbox.vue"

::

<Terminal />

::code-group

::code-block{label="Preview" preview} :terminal{content="nuxi build"} ::

:terminal{content="nuxi build"}

::

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

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

::

::source-link

source: "components/content/VideoPlayer.vue"

::