hmsk/vite-plugin-markdown

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!