{"id":14288,"library":"vue-markdown","title":"Vue Markdown Parser Component","description":"Vue-markdown is a component designed for Vue.js applications (specifically Vue 2.x) that provides robust and high-speed parsing and rendering of Markdown content. The current stable version, 2.2.4, was released approximately seven years ago and primarily supports the Vue 2 ecosystem. It offers extensive Markdown syntax support including GFM task lists, tables, automatic table of contents generation, emojis, footnotes, and allows for integration with external libraries like Prism for syntax highlighting and KaTeX for mathematical expressions. Key differentiators include its rich feature set for extended Markdown and its direct component-based integration for Vue 2. However, the package is no longer actively maintained, making it unsuitable for modern Vue 3+ projects, which would require alternative solutions or manual integration of a generic Markdown parser.","status":"abandoned","version":"2.2.4","language":"javascript","source_language":"en","source_url":"https://github.com/miaolz123/vue-markdown","tags":["javascript","vue","markdown","vue-markdown"],"install":[{"cmd":"npm install vue-markdown","lang":"bash","label":"npm"},{"cmd":"yarn add vue-markdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-markdown","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the ES6 import for module bundlers like Webpack or Vite (for Vue 2 projects). It imports the default export.","wrong":"const VueMarkdown = require('vue-markdown')","symbol":"VueMarkdown","correct":"import VueMarkdown from 'vue-markdown'"},{"note":"This is the CommonJS `require` syntax, typically used in Node.js environments or older build setups. Ensure you are using it within a Vue 2 project.","wrong":"import VueMarkdown from 'vue-markdown'","symbol":"VueMarkdown","correct":"const VueMarkdown = require('vue-markdown')"},{"note":"While `Vue.use(VueMarkdown)` or `Vue.component` might be seen, the common pattern for component registration in a single-file component or local scope is `components: { VueMarkdown }` after importing.","wrong":"Vue.component('vue-markdown', VueMarkdown)","symbol":"VueMarkdown component registration","correct":"new Vue({\n  components: {\n    VueMarkdown\n  }\n})"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueMarkdown from 'vue-markdown';\n\nnew Vue({\n  el: '#app',\n  components: {\n    VueMarkdown\n  },\n  data: {\n    markdownSource: '# Hello, Vue-Markdown!\\n\\nThis is a *simple* example. You can write **bold** and _italic_ text.\\n\\n- List item 1\\n- List item 2\\n\\n```javascript\\nconsole.log(\"Hello from a code block!\");\\n```\\n\\nFeel free to modify this text and see the changes instantly.'\n  },\n  template: `\n    <div id=\"app\">\n      <h1>My Markdown Editor</h1>\n      <textarea v-model=\"markdownSource\" rows=\"10\" cols=\"80\"></textarea>\n      <hr>\n      <h2>Rendered Markdown:</h2>\n      <vue-markdown :source=\"markdownSource\" :html=\"true\" :breaks=\"true\"></vue-markdown>\n    </div>\n  `\n});","lang":"javascript","description":"This quickstart demonstrates how to integrate `vue-markdown` into a Vue 2 application, allowing users to input Markdown in a textarea and see it rendered dynamically below. It highlights component registration and binding the `source` prop."},"warnings":[{"fix":"For Vue 3 projects, consider using alternative markdown parsing libraries designed for Vue 3 (e.g., `@kangc/v-md-editor`) or integrate a generic markdown parser (like `markdown-it`) with Vue's `v-html` directive, ensuring proper sanitization.","message":"This package is specifically designed for Vue 2.x applications. It is not compatible with Vue 3.x and will cause runtime errors or unexpected behavior if used in a Vue 3 project.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"For any new projects, or if stability and security are critical, migrate to a actively maintained markdown parsing solution. For existing Vue 2 projects, understand the risks and consider isolating its usage or replacing it if security becomes a concern.","message":"The `vue-markdown` package (version 2.2.4) has not been updated in approximately seven years. It is no longer actively maintained, which means it may contain unpatched security vulnerabilities, outdated dependencies, and will not receive updates for new Vue features or bug fixes.","severity":"abandoned","affected_versions":">=2.0.0"},{"fix":"Always use the `:source` prop (e.g., `<vue-markdown :source=\"myMarkdownString\"></vue-markdown>`) if your Markdown content is dynamic and needs to react to changes. Only use the default slot for static, unchanging Markdown directly within the template.","message":"The default slot content for `vue-markdown` only renders once at the initial component mount. If you pass Markdown content via the default slot, subsequent changes to that content will not be reflected in the rendered output. The `source` prop should be used for dynamic content.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'2':17,48,104 '2.2.4':36 '3':119 'activ':111 'ago':42 'allow':69 'altern':124 'applic':14 'approxim':39 'automat':61 'base':100 'compon':4,10,99 'component-bas':98 'content':31,64 'current':33 'design':11 'differenti':86 'direct':97 'ecosystem':49 'emoji':66 'express':84 'extend':93 'extens':52 'extern':73 'featur':90 'footnot':67 'generat':65 'generic':131 'gfm':57 'high':24 'high-spe':23 'highlight':79 'howev':105 'includ':56,87 'integr':71,101,128 'javascript':134 'katex':81 'key':85 'librari':74 'like':75 'list':59 'longer':110 'maintain':112 'make':113 'manual':127 'markdown':2,7,30,53,94,132,136,139 'mathemat':83 'modern':117 'offer':51 'packag':107 'pars':26 'parser':3,133 'primarili':44 'prism':76 'project':120 'provid':20 'releas':38 'render':28 'requir':123 'rich':89 'robust':21 'set':91 'seven':40 'solut':125 'specif':15 'speed':25 'stabl':34 'support':45,55 'syntax':54,78 'tabl':60,62 'task':58 'unsuit':115 'version':35 'vue':1,6,16,47,103,118,135,138 'vue-markdown':5,137 'vue.js':13 'would':122 'x':18 'year':41","created_at":"2026-04-20T01:58:55.896493+00:00","updated_at":"2026-04-20T01:58:55.896493+00:00","problems":[{"fix":"Ensure `import Vue from 'vue'` is at the top of your script if you are in a module environment (e.g., a Vue CLI project or using Webpack/Vite).","cause":"`vue` is not imported or globally available when using `Vue.use()` or `new Vue()` in a module context.","error":"ReferenceError: Vue is not defined"},{"fix":"For syntax highlighting, you need to include a library like Prism.js and its CSS. For KaTeX, include the KaTeX CSS (`https://unpkg.com/katex/dist/katex.min.css`) in your HTML or import it globally.","cause":"External CSS or JavaScript dependencies for these features are missing.","error":"Syntax highlighting or KaTeX math not rendering"},{"fix":"Provide your dynamic Markdown content through the `:source` prop of the `vue-markdown` component instead of placing it directly within the `<vue-markdown>` tags. For example, use `<vue-markdown :source=\"myDynamicMarkdown\"></vue-markdown>`.","cause":"The default slot in `vue-markdown` is only processed once on component initialization and does not react to changes in its inner HTML content.","error":"Markdown content does not update after initial render when using the default slot."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/miaolz123/vue-markdown","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-markdown","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}