{"id":18525,"library":"marked-vue","title":"marked-vue","description":"A Vue 3 component for rendering Markdown content using the marked library. Current stable version is 1.3.0, released with a focus on Vue 3 composition API and TypeScript support. It provides a declarative way to parse and display Markdown directly in Vue templates, with built-in syntax highlighting and custom renderer options. Unlike other Vue-markdown libraries, marked-vue is built on top of the highly optimized marked parser and offers seamless integration with Vue's reactivity system. It supports slot-based customization and is actively maintained with regular updates aligned with marked's release cadence.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/shigma/marked-vue","tags":["javascript","markdown","vue","component","typescript"],"install":[{"cmd":"npm install marked-vue","lang":"bash","label":"npm"},{"cmd":"yarn add marked-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add marked-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required for Vue component functionality.","package":"vue","optional":false}],"imports":[{"note":"Default export; named import will result in undefined.","wrong":"import { MarkedVue } from 'marked-vue'","symbol":"MarkedVue","correct":"import MarkedVue from 'marked-vue'"},{"note":"Named export for advanced usage; requires ESM.","wrong":null,"symbol":"Component","correct":"import { Component } from 'marked-vue'"},{"note":"Function to create a custom marked instance; ESM-only since v1.","wrong":"const createMarkedVue = require('marked-vue')","symbol":"createMarkedVue","correct":"import { createMarkedVue } from 'marked-vue'"}],"quickstart":{"code":"<!-- Vue 3 component -->\n<template>\n  <MarkedVue :value=\"markdownContent\" />\n</template>\n\n<script setup>\nimport MarkedVue from 'marked-vue'\nimport { ref } from 'vue'\n\nconst markdownContent = ref('# Hello World\\n\\nThis is **bold** and *italic*.')\n</script>","lang":"typescript","description":"Shows basic usage of the MarkedVue component to render Markdown as HTML in a Vue 3 app."},"warnings":[{"fix":"Replace `source` with `value` in the template: <MarkedVue :value=\"...\" />","message":"Breaking change: In version 1.0.0, the component API changed from using a `source` prop to `value` prop. Old code using `source` will not work.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Use `createMarkedVue({...})` to create a custom instance and pass it via prop.","message":"Deprecation: The `marked` option (to pass custom marked instance) is deprecated in favor of `createMarkedVue` function.","severity":"deprecated","affected_versions":">=0.4.0 <1.0.0"},{"fix":"Use `const MarkedVue = require('marked-vue').default` or switch to ESM.","message":"Gotcha: When using CommonJS with `require('marked-vue')`, the default export is not the component but an object with `default` property. This can cause rendering issues if not handled.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade to Vue 3 or pin to version 1.1.x if using Vue 2.","message":"Breaking change: Version 1.2.0 dropped support for Vue 2. Only Vue 3 is supported from this version onward.","severity":"breaking","affected_versions":">=1.2.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use `const MarkedVue = require('marked-vue').default` or switch to ES module import.","cause":"Using CommonJS require without accessing `.default`.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'default')"},{"fix":"Add `const markdownContent = ref('...')` and use `:value=\"markdownContent\"`.","cause":"Forgetting to define the reactive variable in `<script setup>`.","error":"[Vue warn]: Property 'markdownContent' was accessed during render but is not defined on instance."},{"fix":"Run `npm install marked` to install the peer dependency.","cause":"Missing peer dependency 'marked'.","error":"Module not found: Error: Can't resolve 'marked' in '/path/to/project'"},{"fix":"Use either ESM imports/exports or CommonJS, but not both in the same file.","cause":"Mixing ESM import and CommonJS module.exports in the same file.","error":"TypeError: Cannot assign to read only property 'exports' of object '#<Object>'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}