Components

MDCSlot

The fastest way to inject Markdown into your Vue components.
We recommend using <slot> as much as possible an only use <MDCSlot> when you need unwrapping which is not covered by MDC defaults.

The <MDCSlot> is an extension of the <slot> component that makes it easier to render and manipulate Markdown content within your Vue components.

This component is part of @nuxtjs/mdc.

Usage

This component is a replacement for Vue's <slot> component, specifically designed for MDC.

Use the <MDCSlot> component instead of the native <slot> component:

components/content/Callout.vue
<template>
  <div class="callout">
    <!-- similar to <slot /> -->
    <MDCSlot />
  </div>
</template>

Now let's use it in Markdown:

content/index.md
::callout
This is a callout.
::

The rendered HTML will be:

<div class="callout">
  <p>This is a callout.</p>
</div>

This usage would be similar to using the native <slot> component.

Unwrapping

The unwrap prop allows you to remove one or multiple wrapping elements from the rendered content. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.

Let's unwrap the <p> element from the previous example:

components/content/Callout.vue
<template>
  <div class="callout">
    <MDCSlot unwrap="p" />
  </div>
</template>

Now the rendered HTML will be:

<div class="callout">
  This is a callout.
</div>

Named Slots

The use prop allows you to bind a slot by its name. This is useful when you want to render a slot that is not the default one.

Let's improve our Callout component to have a title slot:

components/content/Callout.vue
<template>
  <div class="callout">
    <h2 v-if="$slots.title">
      <MDCSlot :use="$slots.title" unwrap="p" />
    </h2>
    <MDCSlot :use="$slots.default" />
  </div>
</template>

Now let's use it in Markdown:

content/index.md
::callout
#title
Please be careful!
#default
Using MDC & Vue components is addictive.
::

This will result into:

<div class="callout">
  <h2>Please be careful!</h2>
  <p>Using MDC & Vue components is addictive.</p>
</div>

When not using the title slot, the h2 element will not be rendered.

Props

  • use: The slot to bind on, you must provide a use via $slots.{your_slot} in <template>.
    • Type: Vue slot Function
    • Example: $slots.default
  • unwrap: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
    • Type: boolean or string
    • Default: false
    • Example: 'p' or 'ul li'

ContentRenderer

Takes your component from an AST to a wonderful template.

Prose Components

A list of Prose components.