Using markdown file as a component (no loader for *.md files or component is missing template)

[vmihailenco]

I would like to write markdown-based Vue component Hello.md that accepts some properties:

Hello {{ name }}

<script>
export default {
  name: 'Hello',
}
</script>

And then use the component in README.md like this:

<Hello name="world">

So far I've created clientAppEnhance to register the component:

import { defineClientAppEnhance } from '@vuepress/client'

import Hello from './../components/Hello.md'

export default defineClientAppEnhance(({ app }) => {
  app.component('Hello', Hello)
})

But I get the error:

ERROR in ./docs/components/Hello.md 1:6
Module parse failed: Unexpected token (1:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Any hints what to try next?

PS I've also tried to rename Hello.md to Hello.vue. The code compiles but the component does not work:

Component is missing template or render function. 
  at <Hello> 

[meteorlxy]

Well, it's not supported now. We removed the markdown-loader of v1 to decouple with webpack.

You can try to implement a markdown-loader for webpack or a markdown-plugin for vite for your usage.

[vmihailenco]

your usage

Does this implies that this is not going to be supported any time soon?

It is kinda strange to have documentation about creating markdown components and not being able to actually use one...

[meteorlxy]

The documentation is about how a markdown file is transformed to a vue component internally. I think we didn't have any description about importing a markdown file directly