Docs theme with additional Plugins | Adding MermaidJs to NuxtJs [Solved]

Hello, i want to implement a vue-mermaid plugin inside my nuxt-docs app. Since the nuxt.config.js got exported I cant import plugins like

import theme from '@nuxt/content-theme-docs'

export default theme({
  plugins: [
        // https://yarnpkg.com/package/vue-mermaid#readme
        '~/plugins/vue-mermaid.js'
  ],
})

The App tries then to open a plugin folder relative to the node_modules nuxt-docs-theme package…

Plugin not found: myApp\node_modules@nuxt\content-theme-docs\plugins\vue-mermaid.js

How to implement Plugins with this new architecture?

[derHodrig]

I got it to work. Firstly we need MermaidJs npm i mermaid or yarn add mermaid

Secondly create a new Component in components>global

mermaid.vue

<template>
  <div class="mermaid">
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    import("mermaid/dist/mermaid").then(m => {
      m.initialize({
        startOnLoad: true
      });
      m.init();
    });
  }
};
</script>

After that you can use it in your markdown

<mermaid>
graph TD
  A[Silvester] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[Car]
  C -->|Four| F[Mac]
</mermaid>

hint: between those <mermaid> tags should no empty lines!

In the end, it look like this

---

No plugin or nuxt.config.js configuration needed

[Atinux]

Awesome! I will see to implement it into Docus 😃