Slot

When you write contents and paragraphs inside a component with the MDC syntax, you can use Vue's <slot> component to render the content.

Usage

If you don't want to modify the rendered content, simply use Vue's <slot> component.

<template>
  <div class="callout">
    <slot />
  </div>
</template>

Now let's use it in Markdown:

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

<template>
  <div class="callout">
    <slot mdc-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:

<template>
  <div class="callout">
    <h2 v-if="$slots.title">
      <slot name="title" mdc-unwrap="p" />
    </h2>
    <slot />
  </div>
</template>

Now let's use it in Markdown:

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

• mdc-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'