Component is missing template or render function. #3048
Labels
Comments
|
If you want to use
pnpm add mermaid markdown-it-diagram
// .vitepress/config.mts
import diagram from 'markdown-it-diagram'
export default defineConfig({
markdown: {
config: (md) => {
md.use(diagram, {
showController: true,
})
},
},
})
// Diagram.vue
<script setup lang="ts">
import { markdownItDiagramDom } from 'markdown-it-diagram/dom'
import mermaid from 'mermaid'
import { onMounted } from 'vue'
onMounted(async () => {
mermaid.initialize({
startOnLoad: false,
})
await mermaid.run()
markdownItDiagramDom()
})
</script>
<template>
<div>
<slot />
</div>
</template>
// .vitepress/theme/index.ts
import Diagram from '@components/Diagram.vue'
import type { Theme } from 'vitepress'
export default {
enhanceApp({ app }) {
app.component('Diagram', Diagram)
},
} satisfies Theme
<!--diagram.md-->
<Diagram>
```mermaid
graph TD
A-->B
A-->C
B-->D
C-->D
```
</Diagram>
// .vitepress/config.mts
import diagram from 'markdown-it-diagram'
export default defineConfig({
markdown: {
cache: false, // if it is `true`, HMR is not working when update `diagram.md`
config: (md) => {
md.use(diagram, {
showController: true,
})
},
},
})<!--index.md-->
<!--@include: ./diagram.md--> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Constraints.md
frame.md fragment
Expected behavior
Mermaid diagram included and shown.
No such an error previously.
System Info
Additional context
Package.json
The text was updated successfully, but these errors were encountered: