https://github.com/cloudacy/vue-markdown-render
A simple markdown parser for Vue using markdown-it.
https://github.com/cloudacy/vue-markdown-render
markdown-it vue vuejs
Last synced: 21 days ago
JSON representation
A simple markdown parser for Vue using markdown-it.
- Host: GitHub
- URL: https://github.com/cloudacy/vue-markdown-render
- Owner: cloudacy
- License: mit
- Created: 2020-03-31T15:00:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2026-02-13T20:23:41.000Z (4 months ago)
- Last Synced: 2026-02-23T18:17:38.103Z (4 months ago)
- Topics: markdown-it, vue, vuejs
- Language: TypeScript
- Homepage:
- Size: 305 KB
- Stars: 132
- Watchers: 2
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
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
import VueMarkdown from 'vue-markdown-render'
export default defineComponent({
name: 'MyComponent',
components: {
VueMarkdown
},
setup(props, ctx) {
const src = ref('# header')
return {
src
}
}
})
```
### 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
```
### 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
import VueMarkdown from 'vue-markdown-render'
import MarkdownItAnchor from 'markdown-it-anchor';
const plugins = [MarkdownItAnchor];
```
## 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
```