marked-vue

1.3.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error Uncaught TypeError: Cannot read properties of undefined (reading 'default') ↓

cause Using CommonJS require without accessing `.default`.

fix

Use const MarkedVue = require('marked-vue').default or switch to ES module import.

error [Vue warn]: Property 'markdownContent' was accessed during render but is not defined on instance. ↓

cause Forgetting to define the reactive variable in `<script setup>`.

fix

Add const markdownContent = ref('...') and use :value="markdownContent".

error Module not found: Error: Can't resolve 'marked' in '/path/to/project' ↓

cause Missing peer dependency 'marked'.

fix

Run npm install marked to install the peer dependency.

error TypeError: Cannot assign to read only property 'exports' of object '#<Object>' ↓

cause Mixing ESM import and CommonJS module.exports in the same file.

fix

Use either ESM imports/exports or CommonJS, but not both in the same file.

Warnings

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

fix Replace `source` with `value` in the template: <MarkedVue :value="..." />

deprecated Deprecation: The `marked` option (to pass custom marked instance) is deprecated in favor of `createMarkedVue` function. ↓

fix Use `createMarkedVue({...})` to create a custom instance and pass it via prop.

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

fix Use `const MarkedVue = require('marked-vue').default` or switch to ESM.

breaking Breaking change: Version 1.2.0 dropped support for Vue 2. Only Vue 3 is supported from this version onward. ↓

fix Upgrade to Vue 3 or pin to version 1.1.x if using Vue 2.

Install

npm install marked-vue

yarn add marked-vue

pnpm add marked-vue

Imports

MarkedVue

wrong

import { MarkedVue } from 'marked-vue'

correct

import MarkedVue from 'marked-vue'

Default export; named import will result in undefined.

Component
```
import { Component } from 'marked-vue'
```
Named export for advanced usage; requires ESM.

createMarkedVue

wrong

const createMarkedVue = require('marked-vue')

correct

import { createMarkedVue } from 'marked-vue'

Function to create a custom marked instance; ESM-only since v1.

Quickstart

Shows basic usage of the MarkedVue component to render Markdown as HTML in a Vue 3 app.

<!-- Vue 3 component -->
<template>
  <MarkedVue :value="markdownContent" />
</template>

<script setup>
import MarkedVue from 'marked-vue'
import { ref } from 'vue'

const markdownContent = ref('# Hello World\n\nThis is **bold** and *italic*.')
</script>