I’m using Vue-Quill + markdown-it in my Nuxt 3 project and I have an exisiting API that has content and that content is already formatted as markdown.

My problem is the rendered content from the API is not rendered as markdown in the vue-quill text editor. How to render the content from the API as a markdown in the text editor?

For example, the rendered content data from the API is like this

content: "Test contentn This is the content from the APIn # Content Title"

But in the text editor it renders:

<p>Test contentn This is the content from the APIn # Content Title</p>

This is my QuillEditor code:

<ClientOnly>
 <QuillEditor
  ref="quillEditor"
  theme="snow"
  v-model:content="content"
  :toolbar="toolbar"
  contentType="text"
 />
</ClientOnly>

This is the markdown-it code:

<script setup>
import markdownIt from "markdown-it";
import hljs from "highlight.js";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

const md = markdownIt({
  html: true,
  breaks: true,
  quotes: "“”‘’",
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre><code class="hljs">' + hljs.highlight(str, { language: lang, ignoreIllegals: true }).value + "</code></pre>";
      } catch (__) {}
    }

    return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + "</code></pre>";
  },
});

const content = ref(null);

// this is where the data from the API is referenced
content.value = md.render(document.content);
</script>