Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot use Vue component inside Markdown #315

Open
lobo-tuerto opened this issue Jul 7, 2022 · 4 comments
Open

Cannot use Vue component inside Markdown #315

lobo-tuerto opened this issue Jul 7, 2022 · 4 comments

Comments

@lobo-tuerto
Copy link

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

@theoephraim
Copy link

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
Copy link

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.

@lobo-tuerto
Copy link
Author

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

@theoephraim
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants