{"id":15276,"library":"vue-markdown-render","title":"Vue Markdown Renderer","description":"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.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/cloudacy/vue-markdown-render","tags":["javascript","vue","markdown","render","markdown-it","html","typescript"],"install":[{"cmd":"npm install vue-markdown-render","lang":"bash","label":"npm"},{"cmd":"yarn add vue-markdown-render","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-markdown-render","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue 3 component framework.","package":"vue","optional":false}],"imports":[{"note":"This is the primary component for rendering markdown. ESM import is standard for Vue 3.","wrong":"const VueMarkdown = require('vue-markdown-render')","symbol":"VueMarkdown","correct":"import VueMarkdown from 'vue-markdown-render'"},{"note":"Used in the Options API example for defining a component, often paired with `ref` for reactivity.","wrong":"import Vue from 'vue'; Vue.defineComponent(...)","symbol":"defineComponent","correct":"import { defineComponent, ref } from 'vue'"},{"note":"Plugins for markdown-it (like markdown-it-anchor) are typically default exports and imported separately for use with the `plugins` prop.","wrong":"import { MarkdownItAnchor } from 'markdown-it-anchor'","symbol":"MarkdownItAnchor (example plugin)","correct":"import MarkdownItAnchor from 'markdown-it-anchor'"}],"quickstart":{"code":"import { defineComponent, ref } from 'vue';\nimport VueMarkdown from 'vue-markdown-render';\nimport MarkdownItAnchor from 'markdown-it-anchor';\n\nexport default defineComponent({\n  name: 'MarkdownViewer',\n  components: {\n    VueMarkdown\n  },\n  setup() {\n    const src = ref('# Hello, VueMarkdown\\n\\nThis is some **dynamic** content rendered from Markdown.\\n\\n## Features\\n\\n-   Lightweight\n-   TypeScript support\n-   Plugin ready (e.g., markdown-it-anchor)\n\n[Link to GitHub](https://github.com/cloudacy/vue-markdown-render)');\n\n    const options = {\n      html: true,\n      linkify: true,\n      typographer: true\n    };\n\n    const plugins = [MarkdownItAnchor];\n\n    return {\n      src,\n      options,\n      plugins\n    };\n  },\n  template: `\n    <div>\n      <VueMarkdown :source=\"src\" :options=\"options\" :plugins=\"plugins\" />\n    </div>\n  `\n});","lang":"typescript","description":"Demonstrates basic usage of the VueMarkdown component, including passing markdown source, markdown-it options, and external markdown-it plugins."},"warnings":[{"fix":"Upgrade your Vue application to Vue 3 or use `vue-markdown-render@1.x` for Vue 2 compatibility.","message":"Version 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`.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add `\"@types/markdown-it\": \"*\"` to your devDependencies in `package.json` and run `npm install`.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"As 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.","severity":"gotcha","affected_versions":">=2.3.0"},{"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.","message":"Prior 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.","severity":"deprecated","affected_versions":"<2.1.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure your project is using Vue 3.x. If you must use Vue 2, downgrade `vue-markdown-render` to a 1.x version.","cause":"Attempting to use `vue-markdown-render` v2.x in a Vue 2 project, where the component API is incompatible.","error":"TypeError: Cannot read properties of undefined (reading 'setup') or similar errors related to Vue component initialization."},{"fix":"Install `@types/markdown-it` as a dev dependency: `npm install @types/markdown-it --save-dev`.","cause":"Missing or incorrect type definitions for `vue-markdown-render` or its dependencies (specifically `markdown-it`).","error":"Property 'VueMarkdown' does not exist on type '...' or similar TypeScript errors during compilation."},{"fix":"Add `VueMarkdown` to the `components` object within your Vue component definition, e.g., `components: { VueMarkdown }`.","cause":"The `VueMarkdown` component was not properly registered in the parent component's `components` option.","error":"Unknown custom element: <vue-markdown> - did you register the component correctly? For recursive components, make sure to provide the 'name' option."}],"ecosystem":"npm"}