A plugin that enables you to import Markdoc extended markdowns as Vue components.
Install the renderer and plugin:
pnpm add @markdoc/markdoc vite-plugin-markdoc-vue -Dwhere needed:
declare module '*.vue' {
import type { ComponentOptions } from 'vue'
const Component: ComponentOptions
export default Component
}
declare module '*.md' {
import type { ComponentOptions } from 'vue'
const Component: ComponentOptions
export default Component
}then add the following to vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import MarkdocVue from 'vite-plugin-markdoc-vue'
export default defineConfig({
plugins: [
Vue({
include: [/\.vue$/, /\.md$/], // <--
}),
MarkdocVue(),
]
})And import it as a normal Vue component.
<script setup>
import Content from './content.md'
</script>
<template>
<Content />
</template>Imported markdown files accepts an optional components object as a prop. The components object specifies a mapping from your tags and nodes to the corresponding Vue component.
First, add your transformation options to the plugin:
const tags = {
callout: {
render: 'Callout',
attributes: {}
}
}
export default defineConfig({
plugins: [
Vue({
include: [/\.vue$/, /\.md$/], // <--
}),
MarkdocVue({
tags
}),
]
})Then pass your custom component:
{% callout %}
Attention, over here!
{% /callout %}<script setup>
import Content from './content.md'
import Callout from './Callout.vue'
</script>
<template>
<Content :components="{ Callout }" />
</template><template>
<div class="callout">
<slot />
</div>
</template>
<style>
.callout {}
</style>This renders to:
<article>
<div class="callout">
<p>Attention, over here!</p>
</div>
</article>The plugin accepts an optional Markdoc.transform config:
// vite.config.ts
export default defineConfig({
plugins: [
Vue({
include: [/\.vue$/, /\.md$/], // <--
}),
MarkdocVue({
nodes: {},
tags: {}
}),
]
})- vue-markdoc - Vue renderer for Markdoc
- vite-plugin-markdoc - Markdoc plugin for Vite
MIT