Djeex/docudjeex
1
1
Fork 0
Code Issues Pull Requests Projects Wiki Activity
Files
2540bc968f193bf14c8edb80008fc87226898988
docudjeex/docs/content/3.essentials/3.components.md
Djeex 2540bc968f first commit
2025-07-19 13:59:44 +00:00

11 KiB
Raw Blame History

title, description, navigation
title description navigation
Markdown Components Use Markdown components to help you structure your content, with the help of Nuxt UI Pro.
icon title
i-lucide-component Components

Prose components are replacements for HTML typography tags. They provide a simple way to customize your UI when using Markdown.

Docus and Nuxt UI Pro provides a set of styled and beautiful prose components to help you write your documentation using the MDC syntax.

::prose-note{to="https://ui.nuxt.com/getting-started"} This page highlights only the prose components best suited for writing documentation. However, you can use any Nuxt UI or Nuxt UI Pro component in your Markdown. For the full list of available components, visit the Nuxt UI documentation. ::

Accordion

Use the accordion and accordion-item components to display an Accordion in your content.

::tabs :::tabs-item{icon="i-lucide-eye" label="Preview"} ::::accordion :::::accordion-item --- icon: i-lucide-circle-help label: What is Docus and what are its key features?? --- Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax. :::::

  :::::accordion-item
  ---
  icon: i-lucide-circle-help
  label: How do I get started with Docus?
  ---
  The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
  :::::

  :::::accordion-item{icon="i-lucide-circle-help" label="What is Nuxt UI Pro?"}
  Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
  :::::
::::

:::

:::tabs-item{icon="i-lucide-code" label="Code"}

::accordion

  :::accordion-item{label="What is Docus and what are its key features??" icon="i-lucide-circle-help"}
  Docus is a fully integrated documentation solution built with Nuxt UI Pro. It's a theme based on the UI Pro documentation template that provides a ready-to-use visual. User can focus on content using Markdown and MDC syntax.
  :::

  :::accordion-item{label="How do I get started with Docus?" icon="i-lucide-circle-help"}
  The only thing you need to start a Docus project is a `content/` folder. You can have a check at the starter for a quick start.
  :::

  :::accordion-item{label="What is Nuxt UI Pro?" icon="i-lucide-circle-help"}
  Nuxt UI Pro is a collection of premium Vue components, composables and utils built on top of [Nuxt UI](https://ui.nuxt.com/). Nuxt UI Pro is free in development, but you need a license to use it in production.
  :::
::

::: ::

Badge

Use markdown in the default slot of the badge component to display a Badge in your content.

::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::badge v3.0.0 :::: :::

:::tabs-item{icon="i-lucide-code" label="Code"}

::badge
**v3.0.0**
::

::: ::

Callout

Use markdown in the default slot of the callout component to add eye-catching context to your content.

Use the icon and color props to customize it. You can also pass any property from the <NuxtLink> component.

You can also use the note, tip, warning and caution shortcuts with pre-defined icons and colors.

::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::div{.flex.flex-col.gap-4.w-full} :::::note{.w-full.my-0} Here's some additional information for you. :::::

  :::::tip{.w-full.my-0}
  Here's a helpful suggestion.
  :::::

  :::::warning{.w-full.my-0}
  Be careful with this action as it might have unexpected results.
  :::::

  :::::caution{.w-full.my-0}
  This action cannot be undone.
  :::::
::::

:::

:::tabs-item{icon="i-lucide-code" label="Code"}

::note
Here's some additional information.
::

::tip
Here's a helpful suggestion.
::

::warning
Be careful with this action as it might have unexpected results.
::

::caution
This action cannot be undone.
::

::: ::

Card and CardGroup

Use markdown in the default slot of the card component to highlight your content.

Use the title, icon and color props to customize it. You can also pass any property from the <NuxtLink>.

Wrap your card components with the card-group component to group them together in a grid layout.

::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::card-group{.w-full.my-0} :::::card --- icon: i-simple-icons-github target: _blank title: Dashboard to: https://github.com/nuxt-ui-pro/dashboard --- A dashboard with multi-column layout. :::::

  :::::card
  ---
  icon: i-simple-icons-github
  target: _blank
  title: SaaS
  to: https://github.com/nuxt-ui-pro/saas
  ---
  A template with landing, pricing, docs and blog.
  :::::

  :::::card
  ---
  icon: i-simple-icons-github
  target: _blank
  title: Docs
  to: https://github.com/nuxt-ui-pro/docs
  ---
  A documentation with `@nuxt/content`.
  :::::

  :::::card
  ---
  icon: i-simple-icons-github
  target: _blank
  title: Landing
  to: https://github.com/nuxt-ui-pro/landing
  ---
  A landing page you can use as starting point.
  :::::
::::

:::

:::tabs-item{.my-5 icon="i-lucide-code" label="Code"}

:::card-group

  ::card
  ---
  title: Dashboard
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-pro/dashboard
  target: _blank
  ---
  A dashboard with multi-column layout.
  ::

  ::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-pro/saas
  target: _blank
  ---
  A template with landing, pricing, docs and blog.
  ::

  ::card
  ---
  title: Docs
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-pro/docs
  target: _blank
  ---
  A documentation with `@nuxt/content`.
  ::

  ::card
  ---
  title: Landing
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-pro/landing
  target: _blank
  ---
  A landing page you can use as starting point.
  ::

:::

::: ::

Collapsible

Wrap your content with the collapsible component to display a Collapsible in your content.

::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::collapsible | Prop | Default | Type | | ------- | --------- | -------- | | name | | string | | size | md | string | | color | neutral | string | :::: :::

:::tabs-item{icon="i-lucide-code" label="Code"}

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

::: ::

Field and FieldGroup

A fieldis a prop or parameter to display in your content. You can group them by field-group in a list.

::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::field-group{.my-0} :::::field{name="analytics" type="boolean"} Default to false - Enables analytics for your project (coming soon). :::::

  :::::field{name="blob" type="boolean"}
  Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
  :::::

  :::::field{name="cache" type="boolean"}
  Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
  :::::

  :::::field{name="database" type="boolean"}
  Default to `false` - Enables SQL database to store your application's data.
  :::::
::::

:::

:::tabs-item{icon="i-lucide-code" label="Code"}

::field-group
  ::field{name="analytics" type="boolean"}
    Default to `false` - Enables analytics for your project (coming soon).
  ::

  ::field{name="blob" type="boolean"}
    Default to `false` - Enables blob storage to store static assets, such as images, videos and more.
  ::

  ::field{name="cache" type="boolean"}
    Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`
  ::

  ::field{name="database" type="boolean"}
    Default to `false` - Enables SQL database to store your application's data.
  ::
::

::: ::

Icon

Use the icon component to display an Icon in your content.

::code-preview :icon{name="i-simple-icons-nuxtdotjs"}

#code

:icon{name="i-simple-icons-nuxtdotjs"}

::

Kbd

Use the kbd component to display a Kbd in your content.

::code-preview #code

:kbd{value="meta"} :kbd{value="K"}

::

Tabs

Use the tabs and tabs-item components to display Tabs in your content.

::code-preview :::tabs{.w-full} ::::tabs-item{icon="i-lucide-code" label="Code"} mdc ::callout Lorem velit voluptate ex reprehenderit ullamco et culpa. :: ::::

::::tabs-item{icon="i-lucide-eye" label="Preview"}
  :::::callout
  Lorem velit voluptate ex reprehenderit ullamco et culpa.
  :::::
::::

:::

#code

::tabs{.w-full}
  :::tabs-item{icon="i-lucide-code" label="Code"}
    ```mdc
    ::::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    ::::
    ```
  ::::

  :::tabs-item{icon="i-lucide-eye" label="Preview"}
    :::::callout
    Lorem velit voluptate ex reprehenderit ullamco et culpa.
    :::::
  :::
::

::

Steps

Wrap your headings with the Steps component to display a list of steps.

Use the level prop to define which heading will be used for the steps.

::tabs :::tabs-item{.my-5 icon="i-lucide-eye" label="Preview"} ::::steps{level="4"} #### Start a fresh new project

```bash [Terminal]
npx nuxi init -t github:nuxt-ui-pro/docus
```

#### Run docus CLI to run your dev server

```bash [Terminal]
docus dev
```
::::

:::

:::tabs-item{icon="i-lucide-code" label="Code"}

::steps{level="4"}
  #### Start a fresh new project
  
  ```bash [Terminal]
  npx nuxi init -t github:nuxt-ui-pro/docus
  ```
  
  #### Run docus CLI to run your dev server
  
  ```bash [Terminal]
  docus dev
  ```
::

::: ::