The <ContentSlot> component makes it easier to use Markdown syntax in your Vue components.

It is useful when creating components that you want to use in your Markdown content.

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: 'ul li'

Example

<template>
  <h2 class="fancy-header"><ContentSlot :use="$slots.default" unwrap="p" /></h2>
</template>

Then using it in Markdown:

::fancy-header
That text paragraph will be unwrapped.
::

Will result to:

<h2 class="fancy-header">That text paragraph will be unwrapped.</h2>

Surround

[
  {
    "title": "<ContentQuery>",
    "path": "/content-v2/components/content-query",
    "stem": "content-v2/4.components/4.content-query",
    "description": "The fastest way to query and display your content."
  },
  {
    "title": "Prose Components",
    "path": "/content-v2/components/prose",
    "stem": "content-v2/4.components/7.prose",
    "description": "A list of Prose components currently implemented."
  }
]