Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/litingyes/mdast-util-to-vnode below:

litingyes/mdast-util-to-vnode: mdast utility to get the vue vnode

mdast utility to get the vue vnode

This package is a utility that takes mdast input and turns it into an Vue.js VNode.

Tip

Vue Markdown: the vue component for render markdown string, and support streaming for AI. Learn more 👉

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.

npm install mdast-util-to-vnode

Say we have the following markdown file example.md:

# Heading

`mdast-util-to-vnode` is a mdast utility to get the vue vnode.

And our module example.js looks as follows:

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):

{
  "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."
        }
      ]
    }
  ]
}

This package exports the identifier toVNode. There is no default export.

Support passing in custom Vue components to override mdast nodes.

export type ComponentReturn = Component | [Component, Record<string, any> | undefined]

export interface ToVNodeOptions {
  components?: Partial<Record<Nodes['type'], ComponentReturn |
  ((node: Node) => ComponentReturn)>>
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4