Loading mermaid in a vue component (webpack) - vue.js

Question

I am migrating a vue project that uses mermaid from CDN to webpack. I'm total new with it. I did npm install save mermaid on project folder.
If i load mermaid cdn as static js (in /public/index.html), it crashes for some graphs (shows bomb icon, says syntax error)
If in webpack, it shows nothing as mermaid graphs, but seems to load empty (inspecting generated html with browser tools). No console errors
<svg id="mermaidChart0" width="100%" xmlns="http://www.w3.org/2000/svg"><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"></g></g></g></svg>
Tried:
//package.json
...
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5",
"mermaid": "^8.8.2",
and in the component.vue
<template>
...
<div class="mermaid m-5">
graph LR
B(dsfgdsfgsd <br>) --> Bo(gdfshfghfdh <br>)
...
<script>
import mermaid from 'mermaid'
export default {
data: function() {
return {}
},
mounted() {
this.init();
},
methods: {
init: function() {
mermaid.initialize({
theme: 'forest',
htmlLabels: true,
//startOnLoad: true
});
console.log(mermaid);
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
}
}
}

Answer 1

If you want a ready-to-use solution, you can use my component vue-mermaid-string. It does the internal work for you.
Install it via NPM, then add it to your project via CDN script or by adding the component, then use it like so:
<template>
<vue-mermaid-string :value="diagram" />
</template>
<script>
export default {
computed: {
diagram: () => 'graph TD\n A --> B',
},
}
</script>