Supporting Vue Components in Markdown using Marked-it

[ketsebaoteth]

i was working with nuxt and vue to make a documentation website with markdown and vuecomponents in markdown support i used marked-it to compile markdown and i used plugins to keep custom vue components as they are without converting them to html tags i used another function that someone helped me with to create a <template></template>. But now i want to display this as normal vue and i want to give it all the custom components for it to use. please help !! 🙏

my nuxt server code to load markdown using marked-it and some plugins:

import fs from 'fs';
import path from 'path';
import MarkdownIt from 'markdown-it';
import { frontmatterPlugin } from '@mdit-vue/plugin-frontmatter';
import type { MarkdownItEnv } from '@mdit-vue/types';
import { componentPlugin } from '@mdit-vue/plugin-component'
import { sfcPlugin } from '@mdit-vue/plugin-sfc'

export default defineEventHandler(async (event) => {
  try {
    if (event.req.method !== 'POST') {
      console.warn('Ignoring non-POST request:', {
        method: event.req.method,
        url: event.req.url,
      });
      return;
    }

    const env: MarkdownItEnv = {};

    const { filePath } = await readBody(event);
    console.log('Request body:', filePath);

    const fullPath = path.join(process.cwd(), 'documentation', filePath);
    console.log('Full file path:', fullPath);

    if (!fs.existsSync(fullPath)) {
      console.error('File does not exist:', fullPath);
      return {
        statusCode: 404,
        body: 'File not found',
      };
    }

    const file = fs.readFileSync(fullPath, 'utf8');
    const md = MarkdownIt({ html: true }).use(frontmatterPlugin, {
      grayMatterOptions: {
        excerpt: true,
        excerpt_separator: '<!-- more -->',
      },
    }).use(componentPlugin).use(sfcPlugin);

    function renderMarkdown(content: string) {
      md!.render(content, env)

      return [
        ...(env.sfcBlocks?.scripts.map((block) => block.content) ?? []),
        env.sfcBlocks?.template?.content,
        ...(env.sfcBlocks?.styles.map((block) => block.content) ?? []),
        ...(env.sfcBlocks?.customBlocks.map((block) => block.content) ?? [])
      ]
        .filter(Boolean)
        .join('\n')
    }

    const result = renderMarkdown(file);
    console.log(env.frontmatter);

    return {
      body: {
        content: result,
        frontmatter: JSON.stringify(env.frontmatter),
      }
    };
  } catch (e: unknown) {
    console.error('Error reading file:', e);
    return {
      statusCode: 500,
      body: (e as Error).message,
    };
  }
});

example return from this server

<template><h2>Creating project</h2>
<p>Prerequisites:</p>
<ul>
<li>Node.js-'18.x' or newer (but we recommend the latest LTS version)</li>
<li>Text Editor-There is no specific text editor required, but we recommend using the following setup:
<ul>
<li>Visual Studio Code</li>
<li>Mdx Extension ( For better MDX support ).</li>
</ul>
</li>
<li>npm (or compatible package manager 'yarn', 'bun' or 'pnpm' are supported)</li>
<li>Git (optional)</li>
</ul>
<p>if you are using Visual Studio Code, you can open the integrated terminal by pressing <code>Ctrl + </code> ` and use the following command to create a new Vdocs project Setup:</p>
<TabbedCodeBlock tabs='[
{"name":"NPM","command":"npx create vdocs@latest"},
{"name":"BUN","command":"bun create vdocs@latest"},
{"name":"YARN","command":"yarn create vdocs@latest"},
{"name":"PNPM","command":"pnpm create vdocs@latest"}
]' />
<p>then you can navigate to the project director and run the following command to install dependencies <code>vdocs</code> has:</p>
<Codeblock lang="shell" details="~vscodeTerminal~" content="npm install //or any compatible package manager as always" /><p>after running the command, you vdocs project is ready to run. you can start the project by running the following command:</p>
<Codeblock lang="shell" details="~vscodeTerminal~" content="npm run dev //or any compatible package manager as always" /><p>this will start the development server and you can access the project by navigating to <code>http://localhost:3000</code> in your browser.</p>
<h2>Next Steps</h2>
<p>Now that you have finished creating your project, you can start modifing the project to fit your needs. you can start by modifying the <code>config</code> directory to change the site's configuration, or you can start by modifying the <code>docs</code> directory to change the documentation pages.</p>
</template>

potential features i want are:
being able to supply it with custom components as you can see in the markdown export i have some which i want to provide when compiling

[Hetari]

did you try vitepress? https://vitepress.dev/