{"id":12525,"library":"vue-markdown-loader","title":"Vue Markdown Loader","description":"vue-markdown-loader is a Webpack loader designed to convert Markdown files into Vue 2 components, utilizing the popular `markdown-it` parsing library. The current stable version is 2.5.0. The package has seen limited updates and its README explicitly advises developers to consider \"other better choices,\" suggesting it is in maintenance mode or effectively deprecated for new projects. It differentiates itself by enabling direct embedding of Vue `<script>` and `<style>` blocks within Markdown content, offering features like hot reloading, code highlighting, and flexible `markdown-it` configuration options. Its typical release cadence is infrequent, with the last major update (v2.0.0) focusing on automatic script/style extraction. It's primarily used for rendering dynamic documentation or content pages within Vue applications built with Webpack, requiring peer dependencies like `vue-loader` and `vue-template-compiler` for its operation.","status":"maintenance","version":"2.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/QingWei-Li/vue-markdown-loader","tags":["javascript","vue","markdown","webpack","loader"],"install":[{"cmd":"npm install vue-markdown-loader","lang":"bash","label":"npm"},{"cmd":"yarn add vue-markdown-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-markdown-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for integrating with Vue SFCs and the Vue ecosystem. Specifically requires `>=10.0.0`.","package":"vue-loader","optional":false},{"reason":"Fundamental build tool required for all Webpack loaders.","package":"webpack","optional":false},{"reason":"Often a peer dependency of `vue-loader`, required for compiling Vue templates, which this loader generates.","package":"vue-template-compiler","optional":true}],"imports":[{"note":"This is the primary way to reference the loader in your webpack configuration for basic setups (e.g., Vue 1 or older Vue 2 without vue-loader v15+ specific splitting).","wrong":"import { vueMarkdownLoader } from 'vue-markdown-loader'","symbol":"vue-markdown-loader (basic)","correct":"loader: 'vue-markdown-loader'"},{"note":"When integrating with `vue-loader` v15+ (common in modern Vue 2 projects), you must use this specific path for the markdown compiler to work correctly as a chained loader.","wrong":"loader: 'vue-markdown-loader'","symbol":"vue-markdown-loader/lib/markdown-compiler","correct":"loader: 'vue-markdown-loader/lib/markdown-compiler'"},{"note":"This plugin is mandatory for `vue-loader` v15+ and above. Since `vue-markdown-loader` is typically used in conjunction with `vue-loader`, ensure this plugin is correctly configured in your webpack plugins array.","wrong":"import { VueLoaderPlugin } from 'vue-loader'","symbol":"VueLoaderPlugin","correct":"const VueLoaderPlugin = require('vue-loader/lib/plugin');"}],"quickstart":{"code":"const path = require('path');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/main.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: 'vue-loader'\n          },\n          {\n            loader: 'vue-markdown-loader/lib/markdown-compiler',\n            options: {\n              raw: true, // Crucial for passing raw HTML to vue-loader\n              preventExtract: false, // Set to true to disable automatic script/style extraction\n              wrapper: 'article', // Customize the root wrapper tag\n              // Example markdown-it plugin usage\n              use: [\n                [require('markdown-it-anchor'), { permalink: true, permalinkBefore: true, permalinkSymbol: '#' }]\n              ]\n            }\n          }\n        ]\n      }\n    ]\n  },\n  plugins: [\n    new VueLoaderPlugin()\n  ],\n  resolve: {\n    extensions: ['.js', '.vue', '.json', '.md'],\n    alias: {\n      'vue$': 'vue/dist/vue.esm.js'\n    }\n  }\n};\n","lang":"javascript","description":"This webpack.config.js demonstrates how to integrate `vue-markdown-loader` with `vue-loader` v15+ for compiling Markdown files into Vue components, including key options like `raw` and `preventExtract`."},"warnings":[{"fix":"Consider alternatives like `vmark`, `ware-loader`, or `vue-md-loader` for new projects, as suggested in the package's documentation.","message":"The package's own README explicitly states 'You have other better choices' and lists alternative loaders. This indicates the project is not actively recommended for new development and might not receive future updates or active support.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"If you do not want this automatic extraction behavior, set the `preventExtract: true` option in your loader configuration.","message":"Since `v2.0.0`, the loader automatically extracts script and style tags from HTML content embedded within Markdown. This might alter how your embedded Vue code or styles are processed.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your `webpack.config.js` or `vue.config.js` includes `{ loader: 'vue-markdown-loader/lib/markdown-compiler', options: { raw: true } }` in the loader chain for `.md` files.","message":"When used with `vue-loader` v15+, it is crucial to use the specific `vue-markdown-loader/lib/markdown-compiler` path and include the `raw: true` option to ensure the Markdown content is correctly processed and passed to `vue-loader`.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `const VueLoaderPlugin = require('vue-loader/lib/plugin');` to your webpack config and instantiate `new VueLoaderPlugin()` in the `plugins` array. Ensure `vue-loader` and `vue-template-compiler` versions are compatible.","cause":"`VueLoaderPlugin` is missing from your webpack plugins array, or `vue-loader` version is incompatible with your setup.","error":"Module build failed (from ./node_modules/vue-markdown-loader/index.js): Error: Cannot find module 'vue-loader/lib/plugin'"},{"fix":"Verify that your webpack rule for `.md` files uses `vue-markdown-loader/lib/markdown-compiler` and includes `options: { raw: true }`. Also, ensure `vue-loader` is applied after `vue-markdown-loader` in the chain.","cause":"The loader is not correctly configured to pass compiled content to `vue-loader`, often due to missing `raw: true` option or incorrect loader path when using `vue-loader` v15+.","error":"Markdown content is rendered as plain HTML/text without Vue component functionality or styles/scripts are not applied."},{"fix":"If you want to prevent automatic extraction and handle scripts/styles manually (e.g., through `vue-loader`), set the `preventExtract: true` option in `vue-markdown-loader`'s options.","cause":"The automatic extraction feature (introduced in v2.0.0) might interfere with your embedded code, or the content is not correctly tokenized.","error":"Embedded `<script>` or `<style>` tags within markdown are not correctly processed or cause syntax errors."}],"ecosystem":"npm"}