MDC Components

View source

Use MDC syntax to embed Nuxt UI Prose components in your documentation, including the Accordion, Badge, Callout, Card, and Field documentation components, to significantly improve the expressiveness and interactivity of your docs without writing any Vue component code.

Prose components are alternatives to standard HTML typography tags, providing custom UI in Markdown.

Movk Nuxt Docs and Nuxt UI provide beautifully designed Prose components that support MDC syntax.

This page only lists the Prose components suited to documentation. All Nuxt UI components can be used in Markdown. For the full component list, see the Nuxt UI documentation.

`Accordion`

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

::accordion

  :::accordion-item{label="What is Movk Nuxt Docs, and what are its main features?" icon="i-lucide-circle-help"}
  Movk Nuxt Docs is a fully integrated documentation solution built with Nuxt UI. It is a theme based on the UI documentation template, providing visuals out of the box. Users can focus on writing content with Markdown and MDC syntax.
  :::

  :::accordion-item{label="How do I get started with Movk Nuxt Docs?" icon="i-lucide-circle-help"}
  To start a Movk Nuxt Docs project, all you need is a `content/` folder. You can check out the starter template to get going quickly.
  :::

  :::accordion-item{label="What is Nuxt UI?" icon="i-lucide-circle-help"}
  [Nuxt UI](https://ui.nuxt.com/) is a collection of high-quality Vue components, composables, and utilities.
  :::
::

`Badge`

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

v3.0.0

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

`Callout`

Use Markdown in the default slot of the callout component to add eye-catching contextual information to your content.

Use the icon and color properties to customize its appearance. You can also pass any property of the <NuxtLink> component.

In addition, you can use the note, tip, warning, and caution shortcuts, which come with predefined icons and colors.

This is some additional information.

This is a helpful suggestion.

Be careful with this action, as it may have unexpected results.

This action cannot be undone.

::note
This is some additional information.
::

::tip
This is a helpful suggestion.
::

::warning
Be careful with this action, as it may 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 properties to customize it. You can also pass any property from <NuxtLink>.

Use the card-group component to wrap your card components, grouping them together into a grid layout.

Dashboard

A dashboard with a multi-column layout.

SaaS

A template with a landing page, pricing, documentation, and a blog.

Docs

Documentation with @nuxt/content.

Landing

A landing page you can use as a starting point.

:::card-group

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

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

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

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

:::

`Collapsible`

Use the collapsible component to wrap your content to display a Collapsible in your content.

Prop	Default	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::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 property or parameter displayed in your content. You can group them into a list with field-group.

analytics

boolean

Default to false - Enables analytics for your project (coming soon).

blob

boolean

Default to false - Enables blob storage to store static assets, such as images, videos and more.

cache

boolean

Default to false - Enables cache storage to cache your server route responses or functions using Nitro's cachedEventHandler and cachedFunction

database

boolean

Default to false - Enables SQL database to store your application's data.

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

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

`Kbd`

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

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

`Tabs`

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

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::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 property to define which heading is used for the steps.

Start a fresh new project

Terminal

npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template

Run your dev server

Terminal

pnpm run dev

::steps{level="4"}
  #### Start a fresh new project
  
  ```bash [Terminal]
  npx nuxi init -t gh:mhaibaraai/movk-nuxt-docs/template
  ```
  
  #### Run your dev server
  
  ```bash [Terminal]
  pnpm run dev
  ```
::

Code Blocks

[object Object]

Images and embeds

Learn how to add image and video media to your Movk Nuxt Docs pages. Supports standard Markdown image syntax and local image paths (optimized under the hood with NuxtImg), as well as the :video directive for embedding HTML5 video with options such as autoplay, loop, and controls.