Abandoned project?

[querkmachine]

Obligatory warning that this project seems somewhat abandoned at this point, and that you may want to look elsewhere, weary developer.

Although it will likely continue to work for Vue 2.x indefinitely (no clue on the upcoming Vue 3.x), at time of writing the creator hasn't provided code updates or responded to issues and pull requests for several years. It has some vulnerabilities due to outdated dependencies.

Bit of a shame, really, as this is the first library you're likely to find on search engines, package managers and CDNs.

As a possible alternative, markdown-it-vue uses the same underlying library but seems to be more actively maintained.

[ricardoboss]

There are also other alternatives like:

• https://github.com/code-farmer-i/vue-markdown-editor
• https://github.com/cloudacy/vue-markdown-render
• https://github.com/ymmooot/markduck

[alexcroox]

Thanks @ricardoboss, https://github.com/cloudacy/vue-markdown-render was a drop in replacement for my use case

[bartburkhardt]

There's also this:

https://github.com/michaelmyc/vue-markdown-plus

[milindsingh]

I am planning to maintain this package and have already merged most of the PR in my repository. Any contribution is welcomed to the new repository.

Please check https://github.com/adapttive/vue-markdown/ master: current version (with few fixes) next: updated dependencies and few features added.

Use: npm install @adapttive/vue-markdown

https://www.npmjs.com/package/@adapttive/vue-markdown

[MichaelCurrin]

@milindsingh Glad to hear, thanks for sharing!

[MichaelCurrin]

@milindsingh Your package works for me :) I can't make any issues on your repo, but it would be nice to document one of the approaches below in README.md

One needs to replace the imports to reflect the install package.

-import VueMarkdown from 'vue-markdown'
+import VueMarkdown '@adapttive/vue-markdown'

Or...

Leave the imports untouched, by installing as an alias.

npm i vue-markdown@npm:@adapttive/vue-markdown

Which gives a change something like:

{
  "dependencies": {
-  "vue-markdown": "^2.2.4
+  "vue-markdown": "npm:@adapttive/vue-markdown@^X.X.X"
  }
}

See my PR for interest, where I used the alias approach https://github.com/MichaelCurrin/badge-generator/pull/85/files

[milindsingh]

Thanks @MichaelCurrin I have enabled the issue section and now you can raise any issue in it.

Also, It would be really helpful if you can help me to main this package (I'll add you with write access).

And I have already updated all dependencies to latest and done some testing, its released in beta.

npm i @adapttive/[email protected] Checkout: https://www.npmjs.com/package/@adapttive/vue-markdown/v/3.0.0-beta.2

[MichaelCurrin]

Thanks @milindsingh Yes I'm happy to contribute to maintaining that

[MarvinKweyu]

Thanks @MichaelCurrin I have enabled the issue section and now you can raise any issue in it.

Also, It would be really helpful if you can help me to main this package (I'll add you with write access).

And I have already updated all dependencies to latest and done some testing, its released in beta.

npm i @adapttive/[email protected] Checkout: https://www.npmjs.com/package/@adapttive/vue-markdown/v/3.0.0-beta.2

@milindsingh much thanks. Amazing package. Update the npm docs though. They differ from the readme.

[milindsingh]

@MarvinKweyu Thanks, I have updated the repo.

[juhasev]

@milindsingh Thanks for forking this! Switched on to your package to get rid of the security vulnerabilities!

[vincerubinetti]

Hopefully this helps someone stumbling upon this issue. I'm using Vue 3 and Typescript, and just wanted some simple markdown rendering (no need for remark/rehype plugins).

I looked into the above alternatives, as well as more I found through google, but each of them had problems... either didn't work with Vue 3 or Typescript, and/or had an unacceptably big bundle size.

I ended up using micromark and writing a simple Markdownify Vue component like this:

<template>
  <span v-html="html"></span>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { micromark } from "micromark";

// takes a string of basic markdown and renders html
export default defineComponent({
  props: { source: String },
  computed: {
    html() {
      return micromark(this.source || "");
    },
  },
});
</script>

<template>
  <Markdownify source="**Hello** _World_" />
</template>