Create my custom component to be used in Markdown files (mermaid for learning purposes)

[ochorocho]

Hey ... just trying to get familiar with Vitepress. Most of the things i needed just worked. 👍

But now i tried to create a more complex component. Thought including mermaidJs would be a good idea.

So i'm trying to render a SVG using mermaid (✅ works) and want to use that propery in the of my component.

How to pass on the generated SVG code to the template and ideally make it work along with SSR?

mermaid-not-loading.mp4

Markdown:

# Visual overview

<Typo3Mermaid>
      graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
</Typo3Mermaid>

JavaScript

<script lang="ts" setup>
import {DefaultTheme} from "vitepress/theme";
import {useSlots, computed} from "vue";
import mermaid from "mermaid";

mermaid.initialize({
  startOnLoad:true
});

const slots = useSlots()
const content = slots.default()[0].children

const mermaidSvg = computed( () => {
  return mermaid.render('id1', <string>content).then((svg) => {
    console.log(svg.svg)
    return svg.svg
  })
})
</script>

<template>
  <!-- Renders only on page load not when clicking a link to another page and going back -->
  <div class="mermaid">{{content}}</div>

  <!-- Renders only a promise [object Promise] -->
  <div v-html="mermaidSvg"></div>
</template>

<script lang="ts" setup>
import {DefaultTheme} from "vitepress/theme";
import {useSlots, computed} from "vue";
import mermaid from "mermaid";

mermaid.initialize({
  startOnLoad:true
});

const slots = useSlots()
const content = slots.default()[0].children

const mermaidSvg = computed( () => {
  return mermaid.render('id1', <string>content).then((svg) => {
    console.log(svg.svg)
    return svg.svg
  })
})
</script>

<template>
  <!-- Renders only on page load not when clicking a link to another page and going back -->
  <div class="mermaid">{{content}}</div>

  <!-- Renders only a promise [object Promise] -->
  <div v-html="mermaidSvg"></div>
</template>

<style scoped>
</style>

[ochorocho]

🤦 Found a solution.

<script lang="ts" setup>
import {DefaultTheme} from "vitepress/theme";
import {useSlots, computed, ref, onActivated, onMounted} from "vue";
import mermaid from "mermaid";

const data = ref("") // <--- THIS

mermaid.initialize({
  startOnLoad:true
});

const slots = useSlots()
const content = slots.default()[0].children

mermaid.render('id1', <string>content).then((svg) => {
  console.log(svg.svg)
  data.value = svg.svg  // <--- THIS
})

</script>

<template>
  <div v-html="data"></div>  // <--- THIS
</template>

EDIT: for now it's client side only

<ClientOnly>
    <Typo3Mermaid>
          graph LR
          A --- B
          B-->C[fa:fa-ban forbidden]
          B-->D(fa:fa-spinner);
    </Typo3Mermaid>
</ClientOnly>