Recommended way to use Custom Vue components in .md

I am looking into porting the using vue in Markdown from vuepress: https://vuepress.vuejs.org/guide/using-vue.html

If I understand correctly, vitepress doesn’t want to auto register components by convention as Vuepress does. Is this the case? I actually liked this feature, but I understand that vitepress wants to keep the moving parts as small as possible.

What is the recommended way to register the components? I see that in vue-router-next docs they are registered globally inside enhanceApp: https://github.com/vuejs/vue-router-next/search?q=HomeSponsors. Same as with this comment: https://github.com/vuejs/vitepress/issues/92#issuecomment-724645482

Should we document this way in the docs?

Some thoughts about this. It would be great that users that want to use the default theme as is, do not need to learn straight away about enhanceApp to be able to use a vue component in their markdown.

If auto registering by convention in a folder like .vitepress/components is not an option, could we import them directly in the markdown?

# Docs

This is a .md using a custom component

<CustomComponent />

## More docs

...

<script setup>
  import CustomComponent from '../components/CustomComponent.vue'
</script>

Script & style hoisting is working in vitepress: https://vuepress.vuejs.org/guide/using-vue.html#script-style-hoisting, but I tried this example to import a Component and it is not at this point.

[yyx990803]

FWIW, adding this in .md file should already work:

<script setup>
  import CustomComponent from '../components/CustomComponent.vue'
</script>

[TheDutchCoder]

I use the following pattern currently:

// @ts-ignore
const modules = import.meta.globEager('../components/**/*.vue')
const components = []

for (const path in modules) {
  components.push(modules[path].default)
}

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    components.forEach(component => {
      app.component(component.name, component)
    })
  }
}