nuxt-mermaid-string

Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.

Install

# npm
$ npm install nuxt-mermaid-string

# Yarn
$ yarn add nuxt-mermaid-string

Usage

Add the module to your nuxt.config.js:

export default {
  modules: [
    'nuxt-mermaid-string',
  ],
}

Now you can add the vue-mermaid-string component to your Nuxt app like this:

<template>
  <vue-mermaid-string :value="diagram" />
</template>

<script>
export default {
  computed: {
    diagram: () => 'graph TD\n    A --> B',
  },
}
</script>

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

 If you want to send me a one time donation. The coffee is pretty good 😊.
 Also for one time donations if you like PayPal.
 Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

See also

• vue-mermaid-string: A Vue.js component that turns a Mermaid string into a diagram.
• nuxt-mail: Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
• nuxt-route-meta: Adds Nuxt page data to route meta at build time.
• nuxt-modernizr: Adds a Modernizr build to your Nuxt.js app.
• nuxt-content-git: Additional module for @nuxt/content that replaces or adds createdAt and updatedAt dates based on the git history.

License

MIT License © Sebastian Landwehr