Rendering Markdown Manually in Vue 3 & Nuxt 3

When working on my Scrappy Startup project using Vue 3, I encountered a need to render markdown. This markdown could either be fetched from a database or written inline within my application. Markdown, with its ease of writing and readability, serves as an excellent format for managing text-based content, especially when you have a considerable amount of textual data to handle.

Now, a common way to render markdown in a Vue project is by leveraging Nuxt 3 along with its Nuxt 3 Content module.

It's a powerful tool that I've used in other projects and it works wonders for managing and rendering markdown content. The Document Driven Mode provides a lot of power to make it trivial to render content but sometimes it's easier to keep your file...as a .vue file instead of a .md file.

So, the challenge was to find an alternative - a way to manually render markdown in Vue 3 without relying on Nuxt 3 Content's Document Driven Mode.

This would help in keeping the project lightweight and straightforward, while still being able to handle markdown rendering efficiently.

Diving into Manual Markdown Rendering in Vue 3

As we delve into the script setup, you'll find a straightforward method to render markdown when it's retrieved from a database or present inline, ensuring the rendering process is as seamless as possible...

<script setup lang="ts">
// @ts-expect-error avoid lint error
import markdownParser from '@nuxt/content/transformers/markdown'
const content = `
# This is
my 
markdown
*content*
`
let parsedMarkdown = await markdownParser.parse(null, content)
</script>

The template is where you'll actually call the render function.

<template>
<ContentRenderer :value="parsedMarkdown" v-bind="$attrs" />
</template>

Conclusion

This post outlined a method to render markdown in Vue 3 manually, bypassing the use of Nuxt 3 Content's Document Driven Mode for a lighter project setup. The provided solution, encapsulated within a .vue file, handles markdown from a database or inline text efficiently.

It also demonstrates Vue 3's adaptability, offering a simple way of rendering markdown without a lot of work.