Using Mdx With Nuxtjs 3

[ketsebaoteth]

hey there, i was trying to setup mdx with nuxtjs 3 i planned on using mdx on demand and i have this server api in nuxt to serve the compiled data to me per the docs of how to use on demand mdx

import fs from 'fs';
import path from 'path';
import { compile } from '@mdx-js/mdx';

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 { 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 compileMdx = await compile(file,{
      outputFormat: 'function-body',
      providerImportSource: '@mdx-js/vue',
    })
    return {
      body: {
        content: String(compileMdx),
      }
    };
  } catch (e: unknown) {
    console.error('Error reading file:', e);
    return {
      statusCode: 500,
      body: (e as Error).message,
    };
  }
});

Component to render it

<script setup lang="ts">
import { ref, onMounted, defineComponent, h } from 'vue';
import { docsStates } from '../../state';
import { run } from '@mdx-js/mdx';
import * as VueRuntime from 'vue' // Import everything from "vue" as an object

interface Props {
  slug: string;
}

const props = defineProps<Props>();

const result = ref<string>("");


interface mdxResponse{
  content: string;
  frontmatter: string;
}

const vueComponent = ref<any>(null);

async function getMarkdownFile(): Promise<void> {
  try {
    const response = await $fetch<{ body: mdxResponse }>('/middleware/mdx', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: {
        filePath: props.slug,
      },
    });
    console.log(response.body.content);
    const compiledCode = response.body.content;
    const componentFactory = new Function('Vue', compiledCode)
    const MDXContent = componentFactory(VueRuntime)

    console.log(MDXContent)
    vueComponent.value = defineComponent({
      render() {
        // 4) Return h(MDXContent) so that the MDX content is rendered
        return h(MDXContent)
      }
    })
  } catch (error) {
    console.error(error);
  }
}

onMounted(() => {
  getMarkdownFile();
});
</script>

<template>
  <div id="mdx_display" class="mdx_display">
    <DocsGoToTop />
    <DocsBlocksVdocsHeading />
    <component :is="vueComponent" /> <!-- Use the compiled component -->
    <div class="flex gap-2 my-5">
      <DocsPrePage prePage="prepage" />
      <DocsNextPage nextPage="nextpage" />
    </div>
  </div>
</template>

i console logged the mdxContent and i got this if that could help you answer my question:

then i have this component to render the compiled mdx using vue's h function and define component after a lot of debugging I got it to run without errors but the <component :is="vueComponent"> tag doesn't even exist now and vue just doesn't render it what am i doing wrong with my setup

[ChristianMurphy]

Welcome @ketsebaoteth!
It looks like it compiled correctly mdx when evaluated gives you the exports from the file.
If you only want the component piece, use the default export.

[ketsebaoteth]

hey @ChristianMurphy after reading your post i was able to extract the default and tried to evaluate that but i got this error
_provideComponents is not a function
my current code is as follows:

const response = await $fetch<{ body: mdxResponse }>('/middleware/mdx', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: {
        filePath: props.slug,
      },
    });

    const compiledCode = response.body.content;
    console.log('Compiled MDX code:', compiledCode);
    
    const componentFactory = new Function('Vue', `${compiledCode}; return { default: MDXContent };`);
    const module = componentFactory(VueRuntime);
    const MDXContent = module.default;

    console.log('MDXContent:', MDXContent);

    return defineComponent({
      render() {
        return h(MDXContent);
      },
    });
  } catch (error) {
    console.error('Error during MDX content processing:', error);
    return defineComponent({
      render() {
        return h('div', 'Error loading content');
      },
    });
  }

[wooorm]

What you want to do is described here: https://mdxjs.com/guides/mdx-on-demand/. Follow this guide. Do not create your own buggy Function but use the specially made run.