{"id":15279,"library":"vue-simple-markdown","title":"Vue Simple Markdown Component","description":"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.","status":"maintenance","version":"1.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/Vivify-Ideas/vue-simple-markdown","tags":["javascript"],"install":[{"cmd":"npm install vue-simple-markdown","lang":"bash","label":"npm"},{"cmd":"yarn add vue-simple-markdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-simple-markdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for the Vue component to function. Specifically targets Vue 2.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const VueSimpleMarkdown = require('vue-simple-markdown')","symbol":"VueSimpleMarkdown","correct":"import VueSimpleMarkdown from 'vue-simple-markdown'"},{"note":"The component's default styling is provided via a separate CSS file that must be explicitly imported in your project.","symbol":"CSS","correct":"import 'vue-simple-markdown/dist/vue-simple-markdown.css'"},{"note":"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.","wrong":"new Vue({ components: { VueSimpleMarkdown } })","symbol":"Vue.use(VueSimpleMarkdown)","correct":"Vue.use(VueSimpleMarkdown)"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueSimpleMarkdown from 'vue-simple-markdown';\nimport 'vue-simple-markdown/dist/vue-simple-markdown.css';\n\n// Optional: For syntax highlighting with the 'highlight' prop,\n// you'd typically install and import highlight.js and its themes:\n// import 'highlight.js/styles/github.css';\n// import hljs from 'highlight.js';\n// Vue.directive('highlightjs', { /* ... directive setup ... */ });\n\nVue.use(VueSimpleMarkdown);\n\nnew Vue({\n  el: '#app',\n  data: {\n    markdownSource: `# Hello Vue Simple Markdown!\n\nThis is a paragraph with **bold** and *italic* text.\n\n## Features\n\n*   Emoji support :)\n*   Code blocks:\n\n    ```javascript\n    console.log('Hello, world!');\n    const name = 'Vue';\n    ```\n\n| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1   | Cell 2   |\n| Cell 3   | Cell 4   |\n`,\n  },\n  template: `\n    <div id=\"app\">\n      <h1>Markdown Preview</h1>\n      <vue-simple-markdown\n        :source=\"markdownSource\"\n        :highlight=\"true\"\n        :emoji=\"true\"\n        :table=\"true\"\n      />\n    </div>\n  `,\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"For Vue 3 projects, consider alternatives like `vue-markdown-render`, `markdown-it`, or `marked.js` combined with a custom component.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For new projects or those requiring active maintenance and modern features, consider more current Vue 2 or Vue 3 compatible Markdown rendering libraries.","message":"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.","severity":"deprecated","affected_versions":">=1.1.5"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"The `vue-simple-markdown` component was not globally registered via `Vue.use()` or locally registered in the parent component.","error":"[Vue warn]: Unknown custom element: <vue-simple-markdown> - did you register the component correctly?"},{"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.","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.","error":"Error: Can't resolve 'vue-simple-markdown/dist/vue-simple-markdown.css' in '...' (Webpack/Vite error)"},{"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.","cause":"`highlight.js` is not correctly installed, imported, or initialized alongside `vue-simple-markdown`.","error":"Code blocks are displayed as plain text without syntax highlighting, even with `:highlight=\"true\"`."}],"ecosystem":"npm"}