vue-showdown

library4.2.0jsnpmunverified

Vue Showdown is a specialized Vue.js component that integrates the Showdown.js Markdown parser into Vue applications, allowing developers to render Markdown content directly within their templates. The current stable version is 4.2.0, compatible exclusively with Vue 3. Releases appear to follow a regular cadence, with minor and patch updates frequently following major versions. Its primary differentiation lies in providing a declarative and reactive Vue component wrapper for Showdown, simplifying Markdown rendering and supporting Showdown's extensive configuration options and extensions via component props. This approach abstracts away direct Showdown API calls, making it idiomatic for Vue development.

web-framework serialization

npm install vue-showdown

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-SHOWDOWN

vue-showdown

web-frameworkjavascriptv4.2.0

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.

VueShowdown

✓ import VueShowdown from 'vue-showdown'

✗ const VueShowdown = require('vue-showdown')

For Vue 3 applications. CommonJS `require` is not supported in Vue Showdown v4 and modern Node.js environments.

VueShowdown

✓ app.component('VueShowdown', VueShowdown)

✗ Vue.use(VueShowdown)

In Vue 3, components are globally registered using `app.component`. The `Vue.use` method is for plugins and was primarily used in Vue 2 for component registration.

ShowdownExtension

✓ import type { ShowdownExtension } from 'showdown'

Type definition for Showdown extensions, useful when creating custom extensions with TypeScript. Ensure 'showdown' package is installed.

Demonstrates how to import and use the VueShowdown component in a Vue 3 application, including dynamic markdown content, Showdown options, and a custom inline extension for highlighting specific syntax.

import { createApp, ref } from 'vue'; import VueShowdown from 'vue-showdown'; import showdown from 'showdown'; // Peer dependency, must be installed: npm install showdown const app = createApp({ setup() { const markdownContent = ref('# Hello from Vue Showdown\n\nThis is **Markdown** rendered in a Vue 3 component. We can also add {{ custom syntax }} easily.'); const options = ref({ tables: true, tasklists: true, parseImgDimensions: true }); // Define a custom Showdown extension const myExtension: showdown.ShowdownExtension = { type: 'lang', regex: /\{\{ (.+?) \}\}/g, replace: (s: string, match: string) => { return `<span style="background-color: yellow; padding: 2px 4px; border-radius: 3px;">${match}</span>`; } }; return { markdownContent, options, myExtension }; }, template: ` <div id="app" style="font-family: sans-serif; max-width: 800px; margin: 0 auto;"> <h1>Vue Showdown Example (Vue 3)</h1> <p>Edit the Markdown content below and see it render live.</p> <textarea v-model="markdownContent" rows="15" cols="80" style="width: 100%; padding: 10px; border: 1px solid #ddd; margin-bottom: 20px;"></textarea> <div style="border: 1px solid #ccc; padding: 15px; background-color: #f9f9f9;"> <h2>Rendered Output:</h2> <vue-showdown :markdown="markdownContent" :options="options" :extensions="[myExtension]" /> </div> </div> ` }); // Globally register the VueShowdown component app.component('VueShowdown', VueShowdown); // Mount the Vue application app.mount('#app'); // To run this, ensure your HTML contains: <div id="app"></div> // And you have installed: `npm install vue vue-showdown showdown`

Debug

Known issues

breakingVue Showdown v4.x is exclusively compatible with Vue 3. For projects using Vue 2, you must install and use a v2.x version of the package (e.g., `npm install vue-showdown@^2`). Attempting to use v4 with Vue 2 will lead to runtime errors due to Vue API changes.

fix

For Vue 2 projects, change your dependency to `vue-showdown@^2`. For Vue 3 projects, ensure your Vue dependency is 3.x and update `vue-showdown` to its latest version.

affects: >=4.0.0

breakingSince v2.3.0, `vue-showdown` no longer bundles `showdown.js` itself. This means `showdown` must be installed separately as a peer dependency (e.g., `npm install showdown` or `yarn add showdown`). Failure to install `showdown` will result in runtime errors indicating that Showdown's `Converter` cannot be found.

fix

Explicitly install the `showdown` package in your project: `npm install showdown` or `yarn add showdown`.

affects: >=2.3.0

breakingThe method for passing Showdown extensions to the component changed in v2.2.0. Previously, extensions were passed nested within the `options` prop; they now must be passed directly to a dedicated `extensions` prop.

fix

Update your component usage from `<VueShowdown :options="{ extensions: [myExt] }" />` to `<VueShowdown :extensions="[myExt]" />`. The `options` prop should only contain other Showdown configuration options.

affects: >=2.2.0

gotchaWhen using `vue-showdown` directly in a browser environment via script tags (without a module bundler), `showdown.min.js` must be included via a script tag *before* `vue-showdown.min.js`.

fix

Ensure the script order is correct in your HTML: `<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script><script src="https://unpkg.com/vue-showdown/dist/vue-showdown.min.js"></script>`.

affects: >=2.3.0

Errors

Common errors & fixes

Failed to resolve component: VueShowdown

The VueShowdown component has not been correctly registered with your Vue application instance.

fix

For Vue 3, ensure you are globally registering the component using `app.component('VueShowdown', VueShowdown);` after importing it, and before mounting your application.

TypeError: Cannot read properties of undefined (reading 'Converter')

The core `showdown` library is not found or accessible at runtime. This typically happens because `showdown` is a peer dependency that was not installed or imported correctly.

fix

Install `showdown` as a direct dependency in your project: `npm install showdown` or `yarn add showdown`.

SyntaxError: require is not defined in ES module scope

You are attempting to use CommonJS `require()` syntax in a modern JavaScript environment (e.g., a Vue 3 project set up with Vite or Vue CLI 5+) which primarily uses ES Modules (ESM).

fix

Update your import statements from `const VueShowdown = require('vue-showdown');` to `import VueShowdown from 'vue-showdown';`.

[Vue warn]: Invalid VNode type: undefined (will render as a comment node)

This warning often appears in Vue 3 when a component fails to render, potentially due to incorrect component usage or a mismatch in Vue versions (e.g., using Vue 3 components in a Vue 2 context).

fix

Verify that your project is indeed running Vue 3 and that `vue-showdown` is version 4.x. If using Vue 2, downgrade `vue-showdown` to a 2.x version.

Upgrade

Version history

4.2.0latest on npm

Audit

Dependencies

showdownrequiredCore Markdown parsing library. Must be installed separately as a peer dependency since v2.3.0.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/meteorlxy/vue-showdown ↗

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

homepagehttps://vue-showdown.js.org ↗