How to use marked plugins in Vue3 project?

Question

I have tried to use marked plugin in my Vue.js apps. Installed [email protected], 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?

it exports a function so use import { marked } from 'marked'; — Lawrence Cherone
– Lawrence Cherone, Commented Jan 6, 2022 at 1:01

Ameth Ordoñez · Accepted Answer · 2022-11-18 21:22:14Z

2

You need import the library as

import { marked } from 'marked'

and use like marked.parse(markdown.value)

answered Nov 18, 2022 at 21:22

Ameth Ordoñez

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use marked plugins in Vue3 project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related