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
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.
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>
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.