wobsoriano / vue-markdoc

Vue renderer for Markdoc

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

vue-markdoc's Issues

Non-functional value encountered for default slot

Hello,

vue is complaining about the usage of the default slot with a non-functional value over a function slot.
Im not completely aware of what that means - Is this something that could be fixed within the rederer?

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 
  at <Callout type="warning" > 
  at <Anonymous> 
  at <Main onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<Proxy { <target>: Proxy, <handler>: {…} }>>
  at <RouterView> 
  at <App>

Wrong (?) exported module path in package.json

Hi,
I was trying to use your library (thanks for your work btw!) but encountered some problems trying to import it. If you take a look at the dist folder you'll see it contains a .js, .cjs and .d.ts files but no .mjs that is the one specified inside the package.json inside exports.import and module properties. Updaing them to use the .js seems to work fine instead.
Is this an error or expected behaviour?

Thanks for the help and any clarification!

Edit 1: My edits are as follows:
"exports": { "require": "./dist/index.js", "import": "./dist/index.js" }, "module": "./dist/index.js",

Support for named slots

Is it possible to pass content to named slots currently? I cannot find ways to specify templates and names within the content.

Add attributes as props

Hello,

is it possible to access the attributes added to markdown as props when adding a custom component like in your Callout.vue example?

Attributes are set as html paratmeters right now which makes them inaccessable:

Thanks