Registry / serialization / vue-markdown-render

vue-markdown-render

library2.3.0jsnpmunverified

vue-markdown-render is a lightweight and simple wrapper for the popular markdown-it parsing library, specifically designed for Vue 3 applications. It provides a `VueMarkdown` component that allows rendering Markdown source into HTML directly within Vue templates. The package is written in pure TypeScript, offering full type support. The current stable version is 2.3.0, released in late 2023, indicating an active maintenance and development cadence with regular updates for dependencies like markdown-it. Key differentiators include its minimalistic API, full TypeScript integration, and direct support for passing markdown-it options and plugins, making it flexible for various rendering needs without significant overhead. It requires Vue 3.x as a peer dependency.

serialization web-framework

npm install vue-markdown-render

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-MARKDOWN-RENDE

vue-markdown-render

serializationjavascriptv2.3.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.

VueMarkdown

✓ import VueMarkdown from 'vue-markdown-render'

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

This is the primary component for rendering markdown. ESM import is standard for Vue 3.

defineComponent

✓ import { defineComponent, ref } from 'vue'

✗ import Vue from 'vue'; Vue.defineComponent(...)

Used in the Options API example for defining a component, often paired with `ref` for reactivity.

MarkdownItAnchor (example plugin)

✓ import MarkdownItAnchor from 'markdown-it-anchor'

✗ import { MarkdownItAnchor } from 'markdown-it-anchor'

Plugins for markdown-it (like markdown-it-anchor) are typically default exports and imported separately for use with the `plugins` prop.

Demonstrates basic usage of the VueMarkdown component, including passing markdown source, markdown-it options, and external markdown-it plugins.

import { defineComponent, ref } from 'vue'; import VueMarkdown from 'vue-markdown-render'; import MarkdownItAnchor from 'markdown-it-anchor'; export default defineComponent({ name: 'MarkdownViewer', components: { VueMarkdown }, setup() { const src = ref('# Hello, VueMarkdown\n\nThis is some **dynamic** content rendered from Markdown.\n\n## Features\n\n- Lightweight - TypeScript support - Plugin ready (e.g., markdown-it-anchor) [Link to GitHub](https://github.com/cloudacy/vue-markdown-render)'); const options = { html: true, linkify: true, typographer: true }; const plugins = [MarkdownItAnchor]; return { src, options, plugins }; }, template: ` <div> <VueMarkdown :source="src" :options="options" :plugins="plugins" /> </div> ` });

Debug

Known issues

breakingVersion 2.0.0 introduced a breaking change by switching entirely to Vue 3. Applications built with Vue 2 will not be compatible with `vue-markdown-render@2.x`.

fix

Upgrade your Vue application to Vue 3 or use `vue-markdown-render@1.x` for Vue 2 compatibility.

affects: >=2.0.0

gotchaWhen using TypeScript, the `@types/markdown-it` package must be installed as a development dependency (`npm install @types/markdown-it --save-dev`) to ensure proper type inference for markdown-it options and plugins.

fix

Add `"@types/markdown-it": "*"` to your devDependencies in `package.json` and run `npm install`.

affects: >=1.0.0

gotchaAs of v2.3.0, the package upgraded its internal `markdown-it` dependency to v14. While generally backward compatible, review markdown-it's own changelog for any subtle breaking changes or deprecated features if you rely on advanced or custom markdown-it configurations.

fix

Test your markdown rendering thoroughly after upgrading to v2.3.0, especially if you use custom markdown-it configurations or plugins that might be sensitive to markdown-it version changes.

affects: >=2.3.0

deprecatedPrior to v2.1.1, the component might have been used with the Options API exclusively. While still supported, `v2.1.1` introduced a refactor to use Composition API internally, and the provided quickstart examples now predominantly use Composition API with `<script setup>` for better integration with modern Vue 3 practices.

fix

Consider migrating component usage to Composition API with `<script setup>` for new components or refactoring existing ones for improved maintainability and performance, although the Options API remains functional.

affects: <2.1.1

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'setup') or similar errors related to Vue component initialization.

Attempting to use `vue-markdown-render` v2.x in a Vue 2 project, where the component API is incompatible.

fix

Ensure your project is using Vue 3.x. If you must use Vue 2, downgrade `vue-markdown-render` to a 1.x version.

Property 'VueMarkdown' does not exist on type '...' or similar TypeScript errors during compilation.

Missing or incorrect type definitions for `vue-markdown-render` or its dependencies (specifically `markdown-it`).

fix

Install `@types/markdown-it` as a dev dependency: `npm install @types/markdown-it --save-dev`.

Unknown custom element: <vue-markdown> - did you register the component correctly? For recursive components, make sure to provide the 'name' option.

The `VueMarkdown` component was not properly registered in the parent component's `components` option.

fix

Add `VueMarkdown` to the `components` object within your Vue component definition, e.g., `components: { VueMarkdown }`.

Upgrade

Version history

2.3.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue 3 component framework.

Agent activity

21 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/cloudacy/vue-markdown-render ↗

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