aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/.docs/content/2.api/1.components.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/.docs/content/2.api/1.components.md')
-rw-r--r--docs/.docs/content/2.api/1.components.md693
1 files changed, 0 insertions, 693 deletions
diff --git a/docs/.docs/content/2.api/1.components.md b/docs/.docs/content/2.api/1.components.md
deleted file mode 100644
index d22340f..0000000
--- a/docs/.docs/content/2.api/1.components.md
+++ /dev/null
@@ -1,693 +0,0 @@
-# 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
- - /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.
- ::
- ::
-
- ```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"
----
-::
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-21 04:40:12 +0000