Client rendering of MDX string in a Vue3 app

[marc-x-andre]

Hello everyone,

I'm trying to add mdx support inside Vue3 blog. My goal is to:

1. Write my blog post with mdx on a cms
2. Fetch blog post content with graphql (content will be a long string)
3. Render mdx as a vue component
4. Display content inside the vue App

Something that look like this:

<template>
  <MDXProvider v-if="blogPostMDX">
    {{ blogPostMDX }}
  </MDXProvider>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'App',
  data () {
    return {
      blogPostMDX: undefined
    }
  },
  mounted () {
    fetchBlogPost().then(post => {
      return compileMdx(post)
    }).then(mdx => this.blogPostMDX = mdx)
  },
  methods: {
    ...mapActions({
      fetchBlogPost: 'BlogApi/fetchBlogPost',
    })
  }
}
</script>

I know it's probably not the best idea to render mdx on the client, but it's more for a proof of concept than professional usage.

I read the documentation, but my english isn't really well.

Is it possible to transform a string to mdx vue component?

[wooorm]

Sure it’s possible. I recommend taking 30-60 minutes to read through the docs and getting an understanding of MDX. The docs highlight several ways to do such things.
E.g., see evaluate which is mentioned in many places, or see the MDX on demand guide.
Vue is more complex though because it has a non-standard/custom JSX flavor, so you need to ship Babel with their custom plugin to browsers too. 🤷‍♂️