How can I load content from a database?

[riccardostokker]

Hello everyone!
I'm building a website using Nuxt on the frontend and Directus (read: PostgreSQL) on the backend and I would like to use the MDC syntax provided by Nuxt content on the frontend. I'm primarily interested in the Markdown Components.

I would like to render some MDC string (coming from a database) on my website, and as a preview also in my dashboard.
I'm trying to achieve this using @nuxt/content because as far as i can tell it's the only place where the MDC renderer is available: I have searched the npm database for other MDC renderers but none of them seem to be in use and the ones from Docus point to a repository which doesn't exist (or is private, which makes sense since Docus is in Beta).
How can I render a MDC string with the least overhead possible using @nuxt/content?
Can I create a component that only takes a MDC string and renders its content in the current Nuxt instance?

Here's what I managed to put together after a morning of struggle:

This server API endpoint to render the MDC source code into a ParsedContent element:
server/api/parse.ts

import {appendHeader, defineEventHandler, isMethod, readBody} from 'h3'
import {parseContent} from '#content/server'

import logger from 'debug'
const debug = logger('website:server:parse')

export default defineEventHandler(async (event) => {
    appendHeader(event, 'Access-Control-Allow-Origin', '*');
    appendHeader(event, 'Access-Control-Allow-Credentials', 'true');
    appendHeader(event, 'Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    appendHeader(event, 'Access-Control-Allow-Headers', "Origin, X-Requested-With, Content-Type, Accept")

    if (!isMethod(event, 'POST')) {
        debug('The request is not POST!')
        return {}
    }

    const body = await readBody(event)

    debug('Received parse request with body: %O', body)

    const content = await parseContent(body.id || 'content:_file.md', body.content)

    debug('Generated content: %O', content)

    return content
})

This plugin in plugins/content.tsto make use of the api endpoint and dynamically generate a route:

import {defineNuxtPlugin, useFetch, useRouter} from "#imports";

import logger from 'debug';
const debug = logger('website:plugin:content')
import test from '~/components/test.vue'

export default defineNuxtPlugin(async (nuxtApp) => {

    const parsedContent = await useFetch( '/api/parse', {
        method: 'POST',
        body: {
            _id: '1',
            _path: '/test-page',
            _type: 'markdown',
            title: 'Hello World',
            body: '---\n' +
                'title: MDC\n' +
                '---\n' +
                '\n' +
                '# {{ $doc.title}}\n' +
                '\n' +
                'MDC stands for _**M**ark**D**own **C**omponents_.\n' +
                '\n' +
                'This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component from your `components/content/` directory or provided by a module.'
        }
    } );

    debug('Received parsed content %O', parsedContent);

    /*
     * This is how we'll register the custom routes from the content module.
     */

    const router = useRouter();

    router.addRoute({
        name: 'test-route',
        path: '/test-page',
        component: test,
        props: {
            parsed: parsedContent
        }
    })

})

And this component to render the content, inspired by what I could find in the documentation:

<template>
  <div>
    This is the test page<br>
    Prop: {{ parsed }}
    <ContentRenderer :value="parsed">
        <h1>{{ parsed.title }}</h1>
        <ContentRendererMarkdown :value="parsed" />
    </ContentRenderer>
  </div>
</template>

<script setup lang="ts">
defineProps({
  parsed: Object,
})
</script>

This doesn't work (error below) and wouldn't be ideal even if it worked, since I should pass through the api/parse endpoint also on my dashboard. The error (and output) that this produces is:

[Vue warn]: Unhandled error during execution of setup function 
  at <ContentRendererMarkdown value=Ref< null > >
[Vue warn]: onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.
Received parse request with body: {
  _id: '1',
  _path: '/test-page',
  _type: 'markdown',
  title: 'Hello World',
  body: '---\n' +
    'title: MDC\n' +
    '---\n' +
    '\n' +
    '# {{ $doc.title}}\n' +
    '\n' +
    'MDC stands for _**M**ark**D**own **C**omponents_.\n' +
    '\n' +
    'This syntax supercharges regular Markdown to write documents interacting deeply with any Vue component from your `components/content/` directory or provided by a module.'
}
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'startsWith')
  at parseFrontMatter (./node_modules/remark-mdc/dist/index.mjs:30:15)  
  at parse$2 (./.nuxt/dev/index.mjs:1806:35)  
  at Object.parse (./.nuxt/dev/index.mjs:1852:26)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async transformContent (./.nuxt/dev/index.mjs:2004:18)  
  at async parseContent (./.nuxt/dev/index.mjs:2152:18)  
  at async ./.nuxt/dev/index.mjs:2492:19  
  at async ./node_modules/h3/dist/index.mjs:592:19  
  at async nodeHandler (./node_modules/h3/dist/index.mjs:538:7)  
  at async ufetch (./node_modules/unenv/runtime/fetch/index.mjs:9:17)
  website:plugin:content Received parsed content RefImpl {
  website:plugin:content   __v_isShallow: false,
  website:plugin:content   dep: undefined,
  website:plugin:content   __v_isRef: true,
  website:plugin:content   _rawValue: null,
  website:plugin:content   _value: null
  website:plugin:content } +11ms

The parsed content is null. Why?

Sorry for the wall of text but I could find very little documentation for this use case.
Thank you very much for any help!
Riccardo

[jcolpal]

Hello @riccardofagiolo

Same use case here, wanting to process markdown from Directus (though it could be from anywhere).

I think the strategy of having an API endpoint for this makes sense as you can process markdown retrieved in the backend (Nuxt 3 does this nicely without making an extra http call) and also process markdown to preview in Directus.

You may have noticed that such an endpoint actually is available in the content playground at playground/shared/server/api/parse.ts.

My inclination would be to see if we could officially get this endpoint exposed in the project. This can be done by moving parse.ts to src/runtime/server/api and registering the route in module.ts, which could be conditionally based on an option, e.g.:

if (options.parseApi) {
  nuxt.hook('nitro:config', (nitroConfig) => {
    nitroConfig.handlers.push({
      method: 'post',
      route: `/api/${options.base}/parse`,
      handler: resolveRuntimeModule('./server/api/parse')
    })
  })
} 

This way the endpoint would not be added by default and the option could include an api token to limit use to the web app and Directus.

If there is a straightforward, future-proof way to add the /parse endpoint in app code, I haven't found it, but I'd be glad to try that as well.

[warflash]

Hey ya'll.
I'm wondering if you managed to make loading and rendering external MDC work as I'm in a similar situation but also quite new to nuxt content. If you did make it work I'd really appreciate a short explanation or example stackblitz if you get the chance to do so. Judging by the other discussions this seems something pretty common without any real examples yet 🤔
Thanks!

[riccardostokker]

Hey @warflash @jcolpal,
Just to give you an update, In the end I wasn't satisfied with what was available so I built my own renderer.
I'm making it open source since a lot of people seem to be needing this kind of thing.
Here it is: https://gitlab.com/hermes-renderer/core
You're welcome to check it out, ask me any question and help out :)
Have a good day,
Riccardo