I'm trying to add mermaid support in my Vue application Followed the steps as suggested here
You can view the demo here
Mermaid.vue
<template>
<div class="mermaid" v-if="show">
<slot></slot>
</div>
</template>
<script setup>
let show = ref(false);
const { $mermaid } = useNuxtApp()
onMounted( async() => {
show.value = true
$mermaid().initialize({ startOnLoad: true })
await nextTick()
$mermaid().init();
})
</script>
And config
import mermaid from 'mermaid';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.provide('mermaid', () => mermaid);
});
However the mermaid block was rendering as a code block instead of a graph.
I see just from the demo that you don't have a working mermaid.vue component. Copying from the working example from the same github thread you linked:
Mermaid.vue
Alos, use
<mermaid>
tag in your .md fileStackblitz example