·
2 min read
In my current freelance project, I had to render dynamic Markdown content in a Nuxt 3+ application. The Markdown content was written by redactors in a CMS, provided via an API, and needed to be rendered on the client-side. In this article, I'll explain how we solved the problem of rendering dynamic Markdown content in a Nuxt 3+ application.
The Problem
The Markdown content was provided by the CMS via an API and needed to be rendered on the client-side. The content was dynamic and could change at any time, so we couldn't hard-code it into the application. We needed a way to fetch the Markdown content from the API and render it as HTML in the Nuxt 3+ application.
Previously, the redactors wrote that content in HTML, and we used the v-html directive to render it. However, we wanted to switch to Markdown to make it easier for the redactors to write and format the content. Additionally, this allowed us to easily reuse our existing Vue components.
The Solution
Info
If you are only working with static Markdown files, you can use the @nuxt/content module to render Markdown content in your Nuxt 3+ application.
Luckily, Nuxt 3+ provides a solution for rendering Markdown content using the @nuxtjs/mdc module. This module allows you to render Markdown content as HTML in your Nuxt 3+ application.
You can add it to your project using the following command:
bash
npx nuxi@latest module add mdc
This command will install the @nuxtjs/mdc module and add it to the modules section of your nuxt.config.ts file.
Now you can use the <MDC> component to render Markdown content in your Vue components. Here's an example of how you can use it:
Component.vue
<script setup lang="ts">
const md = ``# h1
## h2
This is a paragraph
This is a [link](https://mokkapps.de)
::my-button
Click me
::`
</script>
<template>
<MDC :value="md" tag="article" />
</template>
That's it! The Markdown content will be rendered as HTML in your Nuxt app. Using the MDC syntax, you can also include custom Vue components in your Markdown content. In my example, I referenced the my-button component, which will be rendered as a button in the Markdown content.
Info
You have to globally register your Vue components if you want to use them in the Markdown content. You can do this by placing them in a ~/components/global directory or by using a .global.vue suffix in the filename.
Stackblitz Demo
Try it yourself in the following Stackblitz demo:
Conclusion
Rendering dynamic Markdown content in a Nuxt 3+ application is easy using the @nuxtjs/mdc module. By using Markdown, you can make it easier for redactors to write and format content and reuse your existing Vue components.
If you liked this article, follow me on X to get notified about my new blog posts and more content.
Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
