Import a component into a markdown file

[dbzx10299]

I know with Nuxt MDC that components must be either marked as global or put inside the components/content dir, but is there a way to make something like this work just so we can see our imports better? If we built a design system and had a certain folder structure that was quite large, we might not want to move it into the content dir, and at the same time we might not want to make the components global.

I know VitePress does something similar to this, if anyone could offer a bit of guidance that be greatly appreciated.

---
title: Test
---

# this is a markdown file with a script tag

<script>
  import Foo from '../../components/Foo.vue'
</script>

<Foo/>

[dbzx10299]

Solution

I did finally find a way to do this, I did not want to put the entire design system in the content dir and at the same time I can't make everything global since in some places I need to import the components to create components with render functions.

If we have a page for example with legal content and want to import a grid cell component so we can use just that on our legal pages we can inject it with the content renderer.

/pages/lega/[...slug].vue

<script setup>
import GridCell from '#components'
</script>

<template>
  <ContentRenderer :components="{ GridCell }" />
</template>

This way we can use it in a markdown file

## Privacy Policy

::GridCell
some info about the policy
::