https://github.com/litingyes/mdast-util-to-vnode
mdast utility to get the vue vnode
https://github.com/litingyes/mdast-util-to-vnode
ai markdown mdast mdast-util remark stream unified vnode vue
Last synced: 3 months ago
JSON representation
mdast utility to get the vue vnode
- Host: GitHub
- URL: https://github.com/litingyes/mdast-util-to-vnode
- Owner: litingyes
- License: mit
- Created: 2025-03-12T12:51:50.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-19T16:16:07.000Z (4 months ago)
- Last Synced: 2025-09-21T05:51:26.510Z (4 months ago)
- Topics: ai, markdown, mdast, mdast-util, remark, stream, unified, vnode, vue
- Language: TypeScript
- Homepage:
- Size: 444 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mdast-util-to-vnode
mdast utility to get the vue vnode
## What is this?
This package is a utility that takes [mdast](https://github.com/syntax-tree/mdast) input and turns it into an [Vue.js](https://github.com/vuejs/core) VNode.
## When should I use this?
> [!TIP]
> Vue Markdown: the vue component for render markdown string, and support streaming for AI. [Learn more 👉](https://github.com/litingyes/vue-markdown)
If you want to use Vue.js to render mdast, use it. It is especially useful when you want to render streamed MarkDown strings in AI application development.
## Install
```bash
npm install mdast-util-to-vnode
```
## Use
Say we have the following markdown file `example.md`:
```md
# Heading
`mdast-util-to-vnode` is a mdast utility to get the vue vnode.
```
And our module `example.js` looks as follows:
```js
import fs from 'node:fs/promises'
import { fromMarkdown } from 'mdast-util-from-markdown'
import { toVNode } from 'mdast-util-to-vnode'
const doc = await fs.readFile('example.md')
const vnode = toVNode(fromMarkdown(doc))
console.log(vnode)
```
Now running node example.js yields (some info removed for brevity):
```json
{
"type": "div",
"props": null,
"key": null,
"children": [
{
"type": "h1",
"props": null,
"key": null,
"children": [
{
"props": null,
"key": null,
"children": "Heading"
}
]
},
{
"type": "p",
"props": null,
"key": null,
"children": [
{
"type": "code",
"props": null,
"key": null,
"children": "mdast-util-to-vnode"
},
{
"props": null,
"key": null,
"children": " is a mdast utility to get the vue vnode."
}
]
}
]
}
```
## API
This package exports the identifier `toVNode`. There is no default export.
### toVNode(mdast[, options])
#### options
Support passing in custom Vue components to override mdast nodes.
```ts
export type ComponentReturn = Component | [Component, Record | undefined]
export interface ToVNodeOptions {
components?: Partial ComponentReturn)>>
}
```