Missing crucials components, doc, stuff...

[kogratte]

Hello guys. I'm facing a lot of issues using Content, but it seems that the underlying culprit is the rood MDC module.

https://github.com/nuxt/content/issues/2420

According to the informations shared throughout documentations, it should be easy to render markdown from any vue component, leveraging color syntax and so on from content.

As of today, it looks this is nearly impossible, due to missing documentation, composable, basic features.

Those missing features, are (this list is not exhaustive):

• Use md content from a vue file, and get formatting right:

<template>
    <ContentRenderer>
        ```sh
            echo "Hello world"

    ```js
        const foo = 'bar';
    ```

Should be able to produce a formatted markdown. How the hell a network call is required to fetch content? Seriously guys?!

- Raw content is missing from context

Various hacks have been suggested, but it shouldn't be a pain in the ass to extend the base context. Whatever you can copy / paste, it's a mess :)

- Composables

How is this possible to provide such powerful feature without related composable to allow the user to tackle specific scenarios?

It should be possible to get:

- The raw markdown (getRawMarkdown)

- The formatted markdown (getPrettyMd)

- Context args: (getMdContext)

I opened an issue on the @nuxt/content repository, but it looks a little bit complex to figure out what needs to be fixed between MDC / Content / 3rd party component (ex, Shiky)...

The original issue can be found here: https://github.com/nuxt/content/issues/2420

Thanks for your time, support and help :)

[kogratte]

I've been working around those requirements the whole day (I'm not going to let it go until it works), and I've got a bunch of new questions around MDC.

<template>
  <MDC :value="md" tag="article" />
</template>

<script setup lang="ts">
const md = `
::alert
Hello MDC
::
`
</script>

Is the simplest example used in order to render markdown into vue component.

Basically, it works, but it is not able to leverage a default slot for example. What should be the logic in order to achieve that?

Anyway, even using something configured using setup fn, I'm not able to use something like shiki in combination. I'm willing to help, not just ask for, but I can't figure the schematics in place and how I should amend them in order to get something simple and flexible.

Can someone with this knowledge enlighten me?

[kogratte]

A little bit more intels.

I've been trying to use the solution available here: https://stackblitz.com/edit/nuxt-starter-5uxxdd.

Once switching to MDC components, I'm facing a new error in the console.

The parser seems to be resolving a file with a wrong url

Console output:

[From mdc-imports.mjs:1] Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

/* [index.mjs]{13, 19} */
export const parseMarkdown = async (md, opts = {}) => {
  if (!moduleOptions) {
    moduleOptions = await import(
      "/_nuxt/@id/file:/workspaces/[..]/.nuxt/mdc-imports.mjs"
      /* @vite-ignore */
    ).catch(() => ({}));
  }

It should instead be resolved with

@id/virtual:nuxt:/workspaces/[...]/.nuxt/mdc-imports.mjs

[kogratte]

Seems to be related to https://github.com/nuxt-modules/mdc/pull/45/files

[farnabaz]

Hey @kogratte, Do you still have issue with imports?

[jonasfroeller]

How the hell a network call is required to fetch content? Seriously guys?!

The problem I am facing is that the requests sometimes fail with a Error 503 (Service Unavailable). (I am using the component inside ClientOnly, but this still happens sometimes.)