How to use components with Nuxt Content?

[Extarys]

Description

I need to use the Anchor in Nuxt Content, any idea how I can make the component available for MDC?

Validations

• [X] Ensure this issue neither a bug report nor a feature proposal.
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that descript the same thing to avoid creating a duplicate.

[qmhc]

Sorry for replying so late!

I'm poor in Nuxt MDC, but I think you should define Anchor outside the markdown via some config.

<template>
  <div ref="mdc">
    <MDC />
  </div>
  <Anchor>
    <AnchorLink v-for="item in anchors" :key="item.id" :to="`#${item.id}`">
      {{ item.name }}
    </AnchorLink>
  </Anchor>
</template>

<script lang="ts" setup>
const mdc = ref<HTMLElement>()
const anchors = reactive<{ id: string, name: string }[]>([])

onMounted(() => {
  const links = mdc.value?.querySelectorAll('a.anchor')

  if (!links?.length) return

  // build anchors
})
</script>