Registry / web-framework / vue-simple-markdown

vue-simple-markdown

library1.1.5jsnpmunverified

Vue Simple Markdown is a lightweight and performant Markdown parsing component specifically designed for Vue.js 2 applications. Currently at version 1.1.5, the package's last publish was 5 years ago, indicating it is no longer actively maintained but remains stable for existing Vue 2 projects. It provides a `<vue-simple-markdown>` component that accepts a `source` prop containing Markdown text and renders it as HTML. Its key differentiators include highly configurable parsing options via numerous boolean props (e.g., `emoji`, `heading`, `highlight`, `table`, `lists`), allowing developers to enable or disable specific Markdown features. While it offers integration with `highlightjs` for syntax highlighting, `highlightjs` itself needs to be installed and managed by the user. The library focuses on simplicity and speed for transforming Markdown within Vue 2 environments.

web-framework serialization

npm install vue-simple-markdown

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SIMPLE-MARKDOW

vue-simple-markdown

web-frameworkjavascriptv1.1.5

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.

VueSimpleMarkdown

✓ import VueSimpleMarkdown from 'vue-simple-markdown'

✗ const VueSimpleMarkdown = require('vue-simple-markdown')

This is the primary way to import the component for bundlers. CommonJS require is not suitable for a Vue component intended for global registration via `Vue.use()` or local component usage.

CSS

✓ import 'vue-simple-markdown/dist/vue-simple-markdown.css'

The component's default styling is provided via a separate CSS file that must be explicitly imported in your project.

Vue.use(VueSimpleMarkdown)

✓ Vue.use(VueSimpleMarkdown)

✗ new Vue({ components: { VueSimpleMarkdown } })

For global availability of the `<vue-simple-markdown>` component throughout your Vue 2 application, `Vue.use()` is the recommended method. While local registration is possible, global registration is more common for plugins.

Demonstrates how to install, globally register, and use the `<vue-simple-markdown>` component with various props to render a markdown string in a Vue 2 application.

import Vue from 'vue'; import VueSimpleMarkdown from 'vue-simple-markdown'; import 'vue-simple-markdown/dist/vue-simple-markdown.css'; // Optional: For syntax highlighting with the 'highlight' prop, // you'd typically install and import highlight.js and its themes: // import 'highlight.js/styles/github.css'; // import hljs from 'highlight.js'; // Vue.directive('highlightjs', { /* ... directive setup ... */ }); Vue.use(VueSimpleMarkdown); new Vue({ el: '#app', data: { markdownSource: `# Hello Vue Simple Markdown! This is a paragraph with **bold** and *italic* text. ## Features * Emoji support :) * Code blocks: ```javascript console.log('Hello, world!'); const name = 'Vue'; ``` | Header 1 | Header 2 | |----------|----------| | Cell 1 | Cell 2 | | Cell 3 | Cell 4 | `, }, template: ` <div id="app"> <h1>Markdown Preview</h1> <vue-simple-markdown :source="markdownSource" :highlight="true" :emoji="true" :table="true" /> </div> `, });

Debug

Known issues

breakingThis package is designed for Vue 2 applications and is not directly compatible with Vue 3. Migration to Vue 3 would require finding an alternative Markdown parsing library or a significant rewrite.

fix

For Vue 3 projects, consider alternatives like `vue-markdown-render`, `markdown-it`, or `marked.js` combined with a custom component.

affects: >=1.0.0

gotchaThe component's default styling is not automatically included. The CSS file must be imported separately in your project's entry point or a global stylesheet.

fix

Add `import 'vue-simple-markdown/dist/vue-simple-markdown.css'` to your main JavaScript file (e.g., `main.js` or `app.js`) or import it into your global CSS/SCSS.

affects: >=1.0.0

gotchaWhile the `highlight` prop enables syntax highlighting, `vue-simple-markdown` does not bundle `highlight.js`. Users must install and configure `highlight.js` themselves for this feature to work.

fix

Install `highlight.js` (e.g., `npm install highlight.js`), import its styles and core library, and potentially register it as a Vue directive or use a wrapper component if needed.

affects: >=1.0.0

deprecatedThe package was last published over 5 years ago, indicating it is no longer actively maintained. While functional for Vue 2, it may not receive updates for new Markdown features, bug fixes, or security patches.

fix

For new projects or those requiring active maintenance and modern features, consider more current Vue 2 or Vue 3 compatible Markdown rendering libraries.

affects: >=1.1.5

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-simple-markdown> - did you register the component correctly?

The `vue-simple-markdown` component was not globally registered via `Vue.use()` or locally registered in the parent component.

fix

Ensure `import VueSimpleMarkdown from 'vue-simple-markdown'; Vue.use(VueSimpleMarkdown);` is called once in your application's entry point, or add `components: { VueSimpleMarkdown }` to your Vue component's options.

Error: Can't resolve 'vue-simple-markdown/dist/vue-simple-markdown.css' in '...' (Webpack/Vite error)

The CSS file for `vue-simple-markdown` is missing or the import path is incorrect. This typically happens if the package wasn't fully installed or the import statement is mistyped.

fix

Verify `npm install vue-simple-markdown` completed successfully and ensure the CSS import path `import 'vue-simple-markdown/dist/vue-simple-markdown.css'` is correct in your main JS/TS file.

Code blocks are displayed as plain text without syntax highlighting, even with `:highlight="true"`.

`highlight.js` is not correctly installed, imported, or initialized alongside `vue-simple-markdown`.

fix

Install `highlight.js`, import its main script and a theme CSS (e.g., `import 'highlight.js/styles/github.css'; import hljs from 'highlight.js';`), and ensure `highlight.js` is properly integrated to process code blocks rendered by the markdown component.

Upgrade

Version history

1.1.5latest on npm

Audit

Dependencies

vuerequiredPeer dependency, required for the Vue component to function. Specifically targets Vue 2.

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Vivify-Ideas/vue-simple-markdown ↗

packagehttps://www.npmjs.com/package/vue-simple-markdown ↗