Search code examples
javascriptvue.jsvuejs3javascript-marked

How to use marked plugins in Vue3 project?

I have tried to use marked plugin in my Vue.js apps. Installed marked@4.0.8, compiled is nothing problem. But in browser, any contents showed. I used vite to make Vue project. Also, I referred this site.

So my test code like that.

<template>
  <div>
    {{ markdown }}
  </div>
  <div v-html="markdownToHtml"></div>
</template>

<script setup>
import { ref, computed } from "@vue/runtime-core";
import marked from "marked";
const markdown = ref("# hello");
const markdownToHtml = computed(() => {
  return marked(markdown.value);
});
</script>

and error code in console at browser like that.

Uncaught SyntaxError: The requested module '/node_modules/.vite/marked.js?v=f8c9698b' does not provide an export named 'default'

How do I correctly use marked in Vue.js project? Does anyone advise me,please?

Solution

  • You need import the library as

    import { marked } from 'marked'

    and use like marked.parse(markdown.value)