How to return markdown content from an Array

[josefaidt]

Hello, folks 👋 this is my first time using Vue and Vitepress, but I have used MDX in the past. In Vitepress, how can you loop over an array of items and return markdown content so we can lean on features such as auto-generated heading anchors?

Currently I have the following, which will render h2's

<script setup>
  import { commands } from '$lib/cli-commands'
  console.log(commands)
</script>

# Commands

<div v-for="(command, index) in commands" :key="index">
  <h2>{{ command.name }}</h2>
</div>

However I'd like to return markdown content to circumvent the need for re-rolling the anchors, something like this:

<div v-for="(command, index) in commands" :key="index">

## {{ command.name }}

</div>

or

<div v-for="(command, index) in commands" :key="index">
  ## {{ command.name }}
</div>

[brc-dd]

What the issue you're getting? Second one should work fine.

[josefaidt]

Aha this works perfectly, thanks @brc-dd for the swift response 🙏

[josefaidt]

@brc-dd (sorry for the ping) actually, this isn't working 100%, and the ID's are not getting generated as expected

<h2 id="command-name" tabindex="-1">install <a class="header-anchor" href="#command-name" aria-hidden="true">#</a></h2>

[brc-dd]

Yeah it's not supported yet: #960, as markdown parser runs before Vue compiler. It is unaware of what will be the final value. Consider using h2 directly. For rest of the stuff you can use markdown without any issues.

[josefaidt]

No worries! And cool I just subscribed to that issue to keep in touch. Writing HTML directly is fine with me!

[yyx990803]

fixed in 2450710 - this is caused by overly aggressive fuzzy link recognition, which is now disabled by default.

[develar]

It looks like it is broken in at least 1.0.0-rc.36+.

<div v-for="(it, index) in data.threads" :key="index">
## {{ it[0] }}
<LineChart :data="it[1]" :endLabel="false"/>
</div>

Doesn't work.

[brc-dd]

You need to separate markdown from html/vue using empty lines.

[develar]

Wow, that's a surprise! :) It's working now, thanks so much for the quick help.