Cannot use Vue component inside Markdown
Opened this issue · 4 comments
Hello, I'm trying to use Vue components inside Markdown following your example in the README but I keep getting this error in the console:
[Vue warn]: Failed to resolve component: helloworld
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Anonymous>
at <App>
Here are the relevant files from a newly created Vite Vue app:
vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import mdPlugin from "vite-plugin-markdown";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [mdPlugin({ mode: "vue" }), vue()],
});
App.vue
<script setup>
import { VueComponentWith } from "./test.md";
import HelloWorld from "./components/HelloWorld.vue";
const WithHello = VueComponentWith({ HelloWorld });
</script>
<template>
<article>
<WithHello />
</article>
</template>
test.md
---
title: Test
date: 2022-07-07
---
# This is a test
* Uno
* Dos
* Tres
> A blockquote
<HelloWorld msg="Hello Vue 3 + Vite" />
Here is a link to the repo containing the code above: https://github.com/lobo-tuerto/markdown-vue
Maybe I'm missing something super obvious... help. :|
Try without the self closing tag, ie <HelloWorld msg="Hello Vue 3 + Vite"></HelloWorld>
I've had this same problem with other similar tools as well...
I also had trouble withe PascalCase
component names. Try remapping the name to kebab case.
const WithHello = VueComponentWith({
'hello-world': HelloWorld
});
Also annoying and should be fixed ideally but this may unblock you.
Hmm, seems like I eventually worked around the limitation somehow.
The problem might still be there, would need to repro the example above with the latest version of everything. 🤔
I'll do that in the next few days and report back.
Thanks for the suggestions, dunno if they work but I'd try to avoid those kind of special cases. 🙏
@lobo-tuerto - I'm able to use those above tips, but would definitely love to avoid both of them... Please share if you find anything interesting about how you worked around it. Cheers!