https://github.com/litingyes/vue-markdown
The vue component for render MarkDown string
https://github.com/litingyes/vue-markdown
ai markdown mdast stream unified vue
Last synced: about 1 month ago
JSON representation
The vue component for render MarkDown string
- Host: GitHub
- URL: https://github.com/litingyes/vue-markdown
- Owner: litingyes
- License: mit
- Created: 2025-03-13T13:12:10.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-05-01T23:57:37.000Z (about 2 months ago)
- Last Synced: 2025-05-08T21:49:42.537Z (about 1 month ago)
- Topics: ai, markdown, mdast, stream, unified, vue
- Language: Vue
- Homepage: https://vue-markdown-x.vercel.app/
- Size: 620 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - Vue Markdown (⭐0) - The vue component for render Markdown string, supports custom rendering of specific node types and better adapts to AI Chat Stream. (Recently Updated / [Mar 25, 2025](/content/2025/03/25/README.md))
README
#  Vue Markdown
The vue component for render Markdown string
## What is this?
This is a Vue.js component focused on Markdown string rendering, which is based on [mdast-util-to-vnode](https://github.com/litingyes/mdast-util-to-vnode) to parse Markdown string and render by Vue.js.
## When should I use this?
- Rendering Markdown strings with Vue.js
- Streaming Markdown strings (usually in AI Chat)
## Install
```base
npm install vue-markdown-x
```
## Use
```vue
import { ref } from 'vue'
import { VueMarkdown } from 'vue-markdown-x'
const mdStr = ref('')
```
### VueMarkdown Props
#### md
Markdown string to render.
```ts
// default: ''
type md = string
```
#### components
Customize how nodes are rendered.
```ts
type ComponentReturn = Component | [Component, Record | undefined]
// default: undefined
type components = Partial ComponentReturn)>>
```
#### shiki
options of shiki for render code block.
```ts
interface shiki {
// default: { light: catppuccinLatte, dark: catppuccinMocha }
themes?: Record
// default: [css,html,javascript,json,markdown,typescript,vue]
langs?: LanguageRegistration[][]
}
```
### VueMarkdown Css Variables
```css
:root {
/* basic font-size, and heading's font-size is scaled based on this value. */
--vue-markdown-font-size: 16px;
/* font-weight for heading */
--vue-markdown-heading-font-weight: 600;
}
```