Is there any way to render arbitrary markdown in a layout file?

[YuukanOO]

Hi there,

I'm wondering if there's any way, in a vue layout file, to render markdown using a component or a specific function.

I've got a bunch of markdown files with that kind of content:

---
title: Some page title here
date: 2017-11-23
description: >
    And in the description, **some** markdown content that I need to _render_.
---

And here the actual page content.

And I'm trying to process them using a layout file like this:

<script setup lang="ts">
const { page } = usePage();
</script>

<template>
  <Topbar />
  <main>
     <!-- I need to render the markdown contained in `page.description` here ... -->
  </main>
</template>

My first idea was to use a so called MDX Component and give the page.description as a property but I can't figure how to retrieve props in a MDX Component (maybe it's not possible...).

Or may be there is another way?

[ElMassimo]

Hi Julien! @YuukanOO

You can use any markdown-in-JS solution to render the markdown, for example, vue-showdown:

<script setup lang="ts">
import { VueShowdown } from 'vue-showdown'
</script>

<template>
  <Topbar />
  <main>
    <VueShowdown :markdown="$page.description"/>
  </main>
</template>

This won't affect the production bundle size if you use it outside islands, zero JS required.

Try it out and let me know how it goes 😃

---

This is something I've been thinking about adding this out of the box, although I haven't yet run into the need myself.

An îles native version would use the dev server and compile the markdown using XDM, which would apply any remark or rehype plugins that you've configured, making it consistent with any other markdown in the site.

[YuukanOO]

Hmmm, since I really need to share the configuration used in my app mdxComponents prop, could you elaborate on the XDM stuff? I am stuck at the moment and could not find a viable solution yet 🤔

[ElMassimo]

Hi Julien, currently the MDX compilation process happens in Node.js (in Vite).

Compiling and rendering MDX in the browser and reusing mdxComponents would require extracting @islands/mdx to make it agnostic to the environment (browser vs node).

It should be possible, but I don't currently have the time to explore that.

[YuukanOO]

Thanks for the quick reply! I'll investigate to see if I can come up with something. I've already tried using the @mdx-js/mdx in a custom component and the evaluate function with the iles/jsx-runtime. It works in dev mode but does not when building (trying to require an ESM module).

I'm not confortable with Vite and maybe what I came up with was kinda hacky 😁

[YuukanOO]

Hell yeah! I made it working!

I'm sure there's a lot of room for improvements, but for my usecase, it will be sufficient for now. The part I was missing was using the vite.ssr.noExternal to add @mdx-js/mdx so that it can be handled correctly (being an ESM only package).

The ssr field is not exported by the UserConfig used by iles defineConfig but that line gave me an hint 😀

I have created an example repo to demonstrate it.

[ElMassimo]

That's awesome! It's really cool that you were able to target the iles/jsx-runtime.

I'll take a look when I have more time and see if we can bring this in, would be great to support it out of the box 😃

Thanks for sharing!