# vue-markdown-render

> A simple, lightweight markdown-it wrapper for Vue written in pure typescript.

Latest version **2.3.1** (published 2026-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-markdown-render
pnpm add vue-markdown-render
yarn add vue-markdown-render
bun add vue-markdown-render
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.3.1 |
| Published | 2026-06-06 |
| First published | 2020-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 78.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Patrick Kuen |
| Maintainers | patcher56 |
| Keywords | vue, markdown, render, markdown-it, html |

## Links

- npm: https://www.npmjs.com/package/vue-markdown-render
- Repository: https://github.com/cloudacy/vue-markdown-render
- Homepage: https://github.com/cloudacy/vue-markdown-render#readme
- Issues: https://github.com/cloudacy/vue-markdown-render/issues
- npm.io page: https://npm.io/package/vue-markdown-render

## Dependencies (1)

- [markdown-it](https://npm.io/package/markdown-it.md) ^14.2.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.3.1 (latest) — 2026-06-06
- 2.3.0 — 2025-09-02
- 2.2.1 — 2024-05-24
- 2.2.0 — 2024-05-24
- 2.1.1 — 2023-10-13
- 2.1.0 — 2023-10-03
- 2.0.1 — 2023-01-08
- 2.0.0 — 2021-12-28
- 1.1.3 — 2021-08-27
- 1.1.2 — 2021-06-05
- 1.1.1 — 2021-02-05
- 1.1.0 — 2021-02-02
- 1.0.2 — 2020-10-16
- 1.0.1 — 2020-03-31

## README

# vue-markdown-render

`vue-markdown-render` is a simple and lightweight wrapper for [markdown-it](https://markdown-it.github.io/) with full TypeScript support.

## Usage

```vue
<template>
  <div>
    <vue-markdown :source="src" />
  </div>
</template>

<script lang="ts">
import VueMarkdown from 'vue-markdown-render'

export default defineComponent({
  name: 'MyComponent',
  components: {
    VueMarkdown
  },
  setup(props, ctx) {
    const src = ref('# header')

    return {
      src
    }
  }
})
</script>
```

### Options

[markdown-it options](https://github.com/markdown-it/markdown-it#init-with-presets-and-options) can be passed as an object into the VueMarkdown component:

```vue
 <vue-markdown :source="src" :options="options" />
```

### Plugins

[markdown-it](https://github.com/markdown-it/markdown-it#plugins-load) compatible simple plugins can be passed as an array into the VueMarkdown component. Example using [MarkdownItAnchor](https://www.npmjs.com/package/markdown-it-anchor)
```vue
<template>
  <vue-markdown :source="markdown" :plugins="plugins" />
</template>

<script setup>
import VueMarkdown from 'vue-markdown-render'
import MarkdownItAnchor from 'markdown-it-anchor';

const plugins = [MarkdownItAnchor];
</script>
```

## TypeScript

If you are using typescript, you have to add the [@types/markdown-it](https://www.npmjs.com/package/@types/markdown-it) to your **dev dependencies**.

```bash
npm install @types/markdown-it --save-dev
```

---
_Source: https://npm.io/package/vue-markdown-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._