vue-markdoc

Transform Markdoc renderable trees to Vue components.

Installation

pnpm add @markdoc/markdoc vue-markdoc

Usage

<script setup>
import Markdoc from '@markdoc/markdoc'
import render from 'vue-markdoc'

const doc = `
# Getting started

Run this command to install the Markdoc library:
`

const ast = Markdoc.parse(doc)
const content = Markdoc.transform(ast)

const ContentComponent = render(content)
</script>

<template>
  <ContentComponent />
</template>

Rendering Vue components

To render a Vue component, provide the components object as an argument along with the content. The components object specifies a mapping from your tags and nodes to the corresponding Vue component.

<script setup>
import Markdoc from '@markdoc/markdoc'
import render from 'vue-markdoc'
import Callout from './Callout.vue'

const tags = {
  callout: {
    render: Callout,
    attributes: {}
  }
};

const doc = `
{% callout %}
Attention, over here!
{% /callout %}
`;

const ast = Markdoc.parse(doc)
const content = Markdoc.transform(ast, { tags })

const ContentComponent = render(content)
</script>

<template>
  <ContentComponent />
</template>

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

<style>
.callout {...}
</style>

Related

• unplugin-markdoc - Markdoc plugin for Vite/Webpack.

License

MIT