vite-plugin-markdown icon indicating copy to clipboard operation
vite-plugin-markdown copied to clipboard

Cannot use Vue component inside Markdown

Open lobo-tuerto opened this issue 3 years ago • 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. :|

lobo-tuerto avatar Jul 07 '22 22:07 lobo-tuerto

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...

theoephraim avatar Apr 05 '23 23:04 theoephraim

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.

theoephraim avatar Apr 05 '23 23:04 theoephraim

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. :thinking:

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. :pray:

lobo-tuerto avatar Apr 06 '23 16:04 lobo-tuerto

@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!

theoephraim avatar Apr 06 '23 17:04 theoephraim