Load external data in markdown format

[kwesterfeld2]

For our release notes feature in our product doc, I want to maintain content externally and import that using a data loader. However, in our product change descriptions, we also want to have markdown, so its nested.

Currently I pull in this data using a Vue template and v-html, but I need a markdown component with in vitepress to arbitrarily pull in markdown content.

Is this possible and I have overlooked something?

[brc-dd]

https://vitepress.dev/guide/routing#dynamic-routes ?

[kwesterfeld2]

The answer isn't going to really help me here, since what I want to do is essentially render one document with content entries, where each entry has markdown in it.

[brc-dd]

Your initial description is not that clear. But maybe you need https://vitepress.dev/guide/markdown#markdown-file-inclusion ?

[kwesterfeld2]

Sorry, let me start over, and thanks for bearing with me.

What I want to do is render markdown data within a table, driven by external data. So in my template, I will have something like this:

## The following issues were fixed in this release:

<table>
  <tr>
    <th>Release</th>
    <th>Issue #</th>
    <th>Description</th>
  </tr>
  <tr v-for="(fix, index) in changelog.fixes" :key="index" :id="fix.id">
    <td>{{ fix.version }}</td>
    <td>{{ fix.issue }}</td>
    <td>
      <div v-html="fix.description" />
    </td>
  </tr>
</table>

Where in my <setup> I have:

import { data } from './changelog.data.ts'
const changelog = data

What might be nice is something like this:

import { useMarkdown } from 'vitepress'
const md = useMarkdown()

And then:

      <div v-html="md(fix.description)" />

[brc-dd]

#2921 (comment) this?

[kwesterfeld2]

Yes this has possibilities, I will try it out....thanks!

[kwesterfeld2]

Just adding to the answer, my external data import and construction of the markdown renderer looks like this:

import { createMarkdownRenderer } from 'vitepress'

const config = globalThis.VITEPRESS_CONFIG
const markdownRenderer = createMarkdownRenderer(config.srcDir, config.markdown, config.site.base, config.logger)

...

  export default {
  watch: ['./changelog/*.yaml'],
  async load(watchedFiles) {
    const md = await markdownRenderer

And use md.render() to convert markdown to html. Works great!

One issue though, my vitepress package.json file had to be changed to "type": "module" for this to work.