Registry / web-framework / vue-markdown-loader

vue-markdown-loader

JSON →
library2.5.0jsnpmunverified

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.

web-frameworkserialization
npm install vue-markdown-loader
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-MARKDOWN-LOADE
V
vue-markdown-loader
web-frameworkjavascriptv2.5.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.

vue-markdown-loader (basic)
✓ loader: 'vue-markdown-loader'
✗ import { vueMarkdownLoader } from 'vue-markdown-loader'
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).
vue-markdown-loader/lib/markdown-compiler
✓ loader: 'vue-markdown-loader/lib/markdown-compiler'
✗ loader: 'vue-markdown-loader'
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.
VueLoaderPlugin
✓ const VueLoaderPlugin = require('vue-loader/lib/plugin');
✗ import { VueLoaderPlugin } from 'vue-loader'
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.

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

const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'development', entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.md$/, use: [ { loader: 'vue-loader' }, { loader: 'vue-markdown-loader/lib/markdown-compiler', options: { raw: true, // Crucial for passing raw HTML to vue-loader preventExtract: false, // Set to true to disable automatic script/style extraction wrapper: 'article', // Customize the root wrapper tag // Example markdown-it plugin usage use: [ [require('markdown-it-anchor'), { permalink: true, permalinkBefore: true, permalinkSymbol: '#' }] ] } } ] } ] }, plugins: [ new VueLoaderPlugin() ], resolve: { extensions: ['.js', '.vue', '.json', '.md'], alias: { 'vue$': 'vue/dist/vue.esm.js' } } };
Debug
Known issues
deprecatedThe 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.
fix
Consider alternatives like `vmark`, `ware-loader`, or `vue-md-loader` for new projects, as suggested in the package's documentation.
affects: >=2.0.0
breakingSince `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.
fix
If you do not want this automatic extraction behavior, set the `preventExtract: true` option in your loader configuration.
affects: >=2.0.0
gotchaWhen 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`.
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.
affects: >=2.0.0
Errors
Common errors & fixes
Module build failed (from ./node_modules/vue-markdown-loader/index.js): Error: Cannot find module 'vue-loader/lib/plugin'
`VueLoaderPlugin` is missing from your webpack plugins array, or `vue-loader` version is incompatible with your setup.
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.
Markdown content is rendered as plain HTML/text without Vue component functionality or styles/scripts are not applied.
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+.
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.
Embedded `<script>` or `<style>` tags within markdown are not correctly processed or cause syntax errors.
The automatic extraction feature (introduced in v2.0.0) might interfere with your embedded code, or the content is not correctly tokenized.
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.
Upgrade
Version history
2.5.0latest on npm
Audit
Dependencies
vue-loaderrequiredRequired peer dependency for integrating with Vue SFCs and the Vue ecosystem. Specifically requires `>=10.0.0`.
webpackrequiredFundamental build tool required for all Webpack loaders.
vue-template-compileroptionalOften a peer dependency of `vue-loader`, required for compiling Vue templates, which this loader generates.
Agent activity
7 hits · last 30 days
node
6
OpenAI (training)
1
Resources
githubhttps://github.com/QingWei-Li/vue-markdown-loader ↗
packagehttps://www.npmjs.com/package/vue-markdown-loader ↗
vue-markdown-loader — npm install vue-markdown-loader · libregistry