Creating doc site with md and vue

[rich panther]

I have a vue component library and i want to import them in md files, how to do this?

[smoky cypress]

Hi @rich panther. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

You can’t use Vue components directly in plain .md files, but you have two good options in Astro/Starlight:

---

1. Use MDX instead of .md

Install the MDX integration, then you can import and use components (including Vue, via a wrapper) in .mdx files just like in .astro files.[MDX components]

Example post.mdx:

---
// frontmatter
title: My page
---

import MyVueWrapper from '../components/MyVueWrapper.astro';

Here is my Vue component:

<MyVueWrapper client:load />

Your MyVueWrapper.astro would render the Vue component (see below).

---

2. Use Markdoc (.mdoc) with tags

If you prefer Markdown-like syntax, use the Markdoc integration. You map Markdoc tags to Astro components, and those Astro components can wrap Vue components.[Markdoc render]

markdoc.config.mjs:

import { defineMarkdocConfig, component } from '@astrojs/markdoc/config';

export default defineMarkdocConfig({
  tags: {
    myvue: {
      render: component('./src/components/MyVueWrapper.astro'),
      attributes: {
        msg: { type: String },
      },
    },
  },
});

Then in page.mdoc:

---
title: My page
---

{% myvue msg="Hello from Markdoc" /%}

---

Wrapping your Vue components

Astro only allows framework components inside .astro files, so create a wrapper that renders your Vue component with a client: directive.[Framework components]

src/components/MyVueWrapper.astro:

---
import MyVueComponent from '../vue/MyVueComponent.vue';
const props = Astro.props;
---

<MyVueComponent {...props} client:load />

You can then:

• Import MyVueWrapper in MDX and use <MyVueWrapper />.[MDX components]
• Register MyVueWrapper as a Markdoc tag as shown above.[Markdoc render]

If you tell me whether you’re using plain Astro or Starlight, and whether you prefer MDX or Markdoc, I can show the exact setup steps.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@rich panther Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[rich panther]

hmm so i can import vue component in astro file and that astro file in md?

@smoky cypress

[smoky cypress]

Let me check the knowledge base for you again. One moment! :books:

Sorry @rich panther, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

[rich panther]

@smoky cypress what about vitepress

[smoky cypress]

Let me check the knowledge base for you again. One moment! :books:

---

The knowledge sources only cover Astro and Starlight, plus migration from VuePress to Astro. They do not mention VitePress at all, so I can’t give you a reliable, VitePress‑specific answer based on them.

What I can say from the docs is:

• Astro/Starlight are suggested as alternatives for documentation sites, with first‑class support for Markdown/MDX/Markdoc and for using Vue components via the @astrojs/vue integration.[Migrating from VuePress; Vue options]
• If you decide to build your docs in Astro/Starlight instead of VitePress, you can:
  • Use MDX or Markdoc content files.
  • Wrap your Vue components in .astro components and use them inside MDX/Markdoc as shown earlier.[Using components in MDX; Markdoc render]

But for “how to import Vue components in Markdown files in VitePress specifically”, the Astro docs don’t provide any information, so I can’t answer that part confidently from these sources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: