# vue-markdown-loader

> markdown file to vue component loader.

Latest version **2.5.0** (published 2021-10-25) · WTFPL license · 0 weekly downloads

## Install

```sh
npm install vue-markdown-loader
pnpm add vue-markdown-loader
yarn add vue-markdown-loader
bun add vue-markdown-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.5.0 |
| Published | 2021-10-25 |
| First published | 2016-06-03 |
| Weekly downloads | 0 |
| License | WTFPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 12.9 KB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 695 |
| Author | qingwei-li |
| Maintainers | qingwei.li |
| Keywords | vue, markdown, webpack, loader |

## Links

- npm: https://www.npmjs.com/package/vue-markdown-loader
- Repository: https://github.com/QingWei-Li/vue-markdown-loader
- Homepage: https://github.com/QingWei-Li/vue-markdown-loader#readme
- Issues: https://github.com/QingWei-Li/vue-markdown-loader/issues
- npm.io page: https://npm.io/package/vue-markdown-loader

## Dependencies (4)

- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.10
- [markdown-it](https://npm.io/package/markdown-it.md) ^8.4.2
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.3.1
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.4.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 2.5.0 (latest) — 2021-10-25
- 2.4.1 — 2018-03-28
- 2.4.0 — 2018-03-06
- 2.3.0 — 2017-11-17
- 2.2.3 — 2017-11-02
- 2.2.2 — 2017-10-16
- 2.2.1 — 2017-09-08
- 2.2.0 — 2017-09-07
- 2.1.0 — 2017-08-22
- 2.0.0 — 2017-07-27
- 1.0.0 — 2017-05-24
- 0.6.2 — 2017-02-08
- 0.6.1 — 2016-11-15
- 0.6.0 — 2016-10-21
- 0.5.1 — 2016-09-21
- … 18 more at https://npm.io/package/vue-markdown-loader/versions

## README

You have other better choices

- https://github.com/egoist/vmark
- https://github.com/liril-net/ware-loader
- https://github.com/wxsms/vue-md-loader

---------

# vue-markdown-loader

[![npm](https://img.shields.io/npm/v/vue-markdown-loader.svg?style=flat-square)](https://www.npmjs.com/package/vue-markdown-loader)
![vue](https://img.shields.io/badge/vue-2.x-4fc08d.svg?colorA=2c3e50&style=flat-square)

> Convert Markdown file to Vue Component using markdown-it.

## Example

- https://github.com/mint-ui/docs
- https://github.com/elemefe/element

## Live demo

https://glitch.com/edit/#!/vue-markdown

## Installation

```bash
# For Vue1
npm i vue-markdown-loader@0 -D

# For Vue2
npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D
```

## Feature

- Hot reload
- Write vue script
- Code highlight

## Usage

[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)

`webpack.config.js` file:

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader'
      }
    ]
  }
};
```

### With `vue-loader 15`

```js
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader'
          },
          {
            loader: 'vue-markdown-loader/lib/markdown-compiler',
            options: {
              raw: true
            }
          }
        ]
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};
```

### With Vue CLI 3

In your `vue.config.js` file:

```js
module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}
```

## Options

### `preventExtract`

Since `v2.0.0`, this loader will automatically extract script and style tags from html token content (#26). If you do not need, you can set this option

```js
{
  test: /\.md$/,
  loader: 'vue-markdown-loader',
  options: {
    preventExtract: true
  }
}
```

### `wrapper`

You can customize wrapper tag no matter html element tag or vue component tag. Default is 'section'

```js
{
  test: /\.md$/,
  loader: 'vue-markdown-loader',
  options: {
    wrapper: 'article',
  }
}
```

### `markdownIt`

reference [markdown-it](https://github.com/markdown-it/markdown-it#init-with-presets-and-options)

```javascript
{
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: {
          // markdown-it config
          preset: 'default',
          breaks: true,
          preprocess: function(markdownIt, source) {
            // do any thing
            return source;
          },
          use: [
            /* markdown-it plugin */
            require('markdown-it-xxx'),
            /* or */
            [require('markdown-it-xxx'), 'this is options']
          ]
        }
      }
    ];
  }
}
```

Or you can customize `markdown-it`

```javascript
var markdown = require('markdown-it')({
  html: true,
  breaks: true
})

markdown
  .use(plugin1)
  .use(plugin2, opts, ...)
  .use(plugin3);

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader',
        options: markdown
      }
    ]
  }
};
```

### Add Vue configuration

```js
var webpack = require('webpack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader'
      }
    ]
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      vue: {}
    })
  ]
};
```

## License

WTFPL

---
_Source: https://npm.io/package/vue-markdown-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._