MDC stands for MarkDown Components. This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component from your components/content/ directory or provided by a module.
Block components are components that accept Markdown content or another component as a slot.
Any component in the components/content/
directory or made available globally in your application can be used in Markdown files.
The component must contain either:
<slot />
to accept raw text or another component.<Markdown />
component to accept formatted text.In a markdown file, use the component with the ::
identifier.
::cardThe content of the card::
A component's slots can accept content or another components.
#
identifier to render the corresponding content.::heroDefault slot text#descriptionThis will be rendered inside the `description` slot.::
MDC supports nested components inside slots by indenting them.
::hero :::card A nested card ::card A super nested card :: :::::
::::
when nesting components as a visual reminder.The <Markdown />
component is auto-imported by Nuxt Content. It acts as a special slot that accepts rich text rendered by Markdown.
The unwrap
prop accepts an HTML tag that will be used to unwrap the content, useful when using tags such as title tags (<h1>
, <h2>
, ...) or inline tags (<button>
, <a>
, ...).
<template> <h1 class="text-4xl"> <Markdown unwrap="p" /> </h1></template>
The <Markdown />
component can act as a named slot with the use
property:
<Markdown :use="$slots.description" unwrap="p">
Inline components are components without slots or <Markdown />
.
They can be used with the :
identifier.
# Title:banner
If you want to use an inline component followed by specific characters like -
, _
or :
, you can use a dummy props specifier after it.
:hello{}-world
In this example, :hello{}
will search for the <Hello />
component, and -world
will be plain text.
There are two ways to pass props to components using MDC.
The {}
identifier passes props to components in a terse way by using a key=value
syntax.
::alert{type="warning"}The **alert** component.::
The YAML method uses the ---
identifier to declare one prop per line, that can be useful for readability.
::icon-card---icon: IconNuxtdescription: Harness the full power of Nuxt and the Nuxt ecosystem.title: Nuxt Architecture.---::
To create inline spans in your text you can use the []
identifier.
Hello [World]{.bg-blue-500}!
Attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax.
Hello [World]{.text-primary-500}!
Other than span
s the attribute syntax will work on images, links, code
, bold and italic texts.
Attributes works on:- {.inline.w-5.h-5.bg-primary-500} image,- [link](#attributes){.bg-primary-400}, `code`{.text-red-500},- _italic_{.bg-primary-500} and **bold**{.bg-primary-500} texts.