vue-markdown

library2.2.4jsnpmunverified

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.

web-framework

npm install vue-markdown

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-MARKDOWN

vue-markdown

web-frameworkjavascriptv2.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueMarkdown

✓ import VueMarkdown from 'vue-markdown'

✗ const VueMarkdown = require('vue-markdown')

This is the ES6 import for module bundlers like Webpack or Vite (for Vue 2 projects). It imports the default export.

VueMarkdown

✓ const VueMarkdown = require('vue-markdown')

✗ import VueMarkdown from 'vue-markdown'

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.

VueMarkdown component registration

✓ new Vue({ components: { VueMarkdown } })

✗ Vue.component('vue-markdown', VueMarkdown)

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.

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.

import Vue from 'vue'; import VueMarkdown from 'vue-markdown'; new Vue({ el: '#app', components: { VueMarkdown }, data: { 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.' }, template: ` <div id="app"> <h1>My Markdown Editor</h1> <textarea v-model="markdownSource" rows="10" cols="80"></textarea> <hr> <h2>Rendered Markdown:</h2> <vue-markdown :source="markdownSource" :html="true" :breaks="true"></vue-markdown> </div> ` });

Debug

Known issues

breakingThis 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.

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.

affects: >=2.0.0

abandonedThe `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.

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.

affects: >=2.0.0

gotchaThe 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.

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.

affects: >=2.0.0

Errors

Common errors & fixes

ReferenceError: Vue is not defined

`vue` is not imported or globally available when using `Vue.use()` or `new Vue()` in a module context.

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).

Syntax highlighting or KaTeX math not rendering

External CSS or JavaScript dependencies for these features are missing.

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.

Markdown content does not update after initial render when using the default slot.

The default slot in `vue-markdown` is only processed once on component initialization and does not react to changes in its inner HTML content.

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>`.

Upgrade

Version history

2.2.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/miaolz123/vue-markdown ↗

packagehttps://www.npmjs.com/package/vue-markdown ↗