425 lines
11 KiB
Markdown
425 lines
11 KiB
Markdown
---
|
|
title: Markdown Components
|
|
description: Use Markdown components to help you structure your content, with
|
|
the help of Nuxt UI Pro.
|
|
navigation:
|
|
icon: i-lucide-component
|
|
title: 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](https://content.nuxt.com/docs/files/markdown#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](https://ui.nuxt.com/components/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"}
|
|
```mdc
|
|
::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](https://ui.nuxt.com/components/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"}
|
|
```mdc
|
|
::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>`](https://nuxt.com/docs/api/components/nuxt-link) 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"}
|
|
```mdc
|
|
::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>`](https://nuxt.com/docs/api/components/nuxt-link).
|
|
|
|
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"}
|
|
```mdc
|
|
:::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](https://ui.nuxt.com/components/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"}
|
|
```mdc
|
|
::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 `field`is 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"}
|
|
```mdc
|
|
::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](https://ui.nuxt.com/components/icon) in your content.
|
|
|
|
::code-preview
|
|
:icon{name="i-simple-icons-nuxtdotjs"}
|
|
|
|
|
|
|
|
#code
|
|
```mdc
|
|
:icon{name="i-simple-icons-nuxtdotjs"}
|
|
```
|
|
::
|
|
|
|
### `Kbd`
|
|
|
|
Use the `kbd` component to display a [Kbd](https://ui.nuxt.com/components/kbd) in your content.
|
|
|
|
::code-preview
|
|
#code
|
|
```mdc
|
|
:kbd{value="meta"} :kbd{value="K"}
|
|
```
|
|
::
|
|
|
|
### `Tabs`
|
|
|
|
Use the `tabs` and `tabs-item` components to display [Tabs](https://ui.nuxt.com/components/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
|
|
````mdc
|
|
::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"}
|
|
````mdc
|
|
::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
|
|
```
|
|
::
|
|
````
|
|
:::
|
|
::
|