Vue Simple Markdown Component

1.1.5 · maintenance · verified Tue Apr 21

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.

Common errors

```
[Vue warn]: Unknown custom element: <vue-simple-markdown> - did you register the component correctly?
```
cause 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)
```
cause 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"`.
```
cause `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.

Warnings

breaking This 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.
gotcha The 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.
gotcha While 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.
deprecated The 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.

Install

npm install vue-simple-markdown npm
yarn add vue-simple-markdown yarn
pnpm add vue-simple-markdown pnpm

Imports

VueSimpleMarkdown
wrong:
```
const VueSimpleMarkdown = require('vue-simple-markdown')
```
correct:
```
import VueSimpleMarkdown from '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)
wrong:
```
new Vue({ components: { VueSimpleMarkdown } })
```
correct:
```
Vue.use(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.

Quickstart

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>
  `,
});

view raw JSON →