marked-vue

library1.3.0jsnpmunverified

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.

web-framework serialization

npm install marked-vue

github ↗package ↗

INSTALL

IMPORT

SIG · MARKED-VUE

marked-vue

web-frameworkjavascriptv1.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

MarkedVue

✓ import MarkedVue from 'marked-vue'

✗ 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

✓ import { createMarkedVue } from 'marked-vue'

✗ const createMarkedVue = require('marked-vue')

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

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

<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>

Debug

Known issues

breakingBreaking 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="..." />

affects: <1.0.0

deprecatedDeprecation: 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.

affects: >=0.4.0 <1.0.0

gotchaGotcha: 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.

affects: >=0.1.0

breakingBreaking 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.

affects: >=1.2.0

Errors

Common errors & fixes

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

Using CommonJS require without accessing `.default`.

fix

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

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

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

fix

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

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

Missing peer dependency 'marked'.

fix

Run `npm install marked` to install the peer dependency.

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

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.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency; required for Vue component functionality.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/shigma/marked-vue ↗

packagehttps://www.npmjs.com/package/marked-vue ↗