qingwei-li / vue-markdown-loader

📇 Convert Markdown file to Vue2.0 component.

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

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

# 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

webpack.config.js file:

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

With vue-loader 15

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:

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

{
  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'

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

markdownIt

reference markdown-it

{
  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

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

var webpack = require('webpack');

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

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

License

WTFPL

vue-markdown-loader's Issues

Use loader as template lang

Would it be possible to use this loader as a template language instead?

For example: <template lang="md"> # Cool! </template>

The reason this is preferable is that most editors already support vue syntax highlighting, while they don't necessarily support javascript syntax highlighting inside .md files.

webpack 4 下，不能解析script

解析出来的.md没有 <script></script> 标签，为空

需要考虑兼容 vue-loader15 了

vue-loader15 目前已经进入 rc 版本阶段了，相信很快会正式发布，但目前 vue-markdown-loader 似乎并不兼容。

在vue-cli中使用 一直报错 markdown文件加载不出来

报错如下：Failed to mount component: template or render function not defined.

请问loader的配置项 raw是什么意思

如果设置成true，则会报模块解析错误，You may need an appropriate loader to handle this file type
如果不设置，则vue会报 Failed to mount component: template or render function not defined.
请问这种情况该如何处理

vue-loader: "^15.4.1"
webpack: "^4.17.1"

不支持写简单的代码么

我现在的需求是需要对md和部分简单链接进行混排，类似于下面的方案：

## test
> some text

<a href="/home">打开首页</a>

结果是a标签直接被转化为文本格式，请问这个可以实现么

@QingWei-Li

markdown-it config not worked

webpack.config.js

const hljs = require('highlight.js');
const markdown = require('markdown-it')({
html: true,
breaks: true,
wrapper: 'section',
preprocess: function (MarkdownIt, Source) {
return Source;
},
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '

' +

hljs.highlight(lang, str, true).value +

'

';
} catch (__) {}
}
return '

' + markdown.utils.escapeHtml(str) + '

';
}
});
markdown.use(require('markdown-it-emoji'));

...{
test: /.md$/,
loader: 'vue-markdown-loader',
options: markdown
}

but the wrapper was undefined and the hightlight was not worked

组件emit的方法驼峰命名时，在md中使用无法监听到该事件

<sr-table ref="myTable" :loading="loading" :data="dataList" @sortChange="change" :table-id="tableId">

sortChange: function ({ column, prop, order }) { this.$emit('sortChange', { column, prop, order }) },

改为sort-change ，才能正常监听到。
请问可以实现 驼峰命名的事件监听吗？ 在 0.6.0版本好像解决过这个问题，但目前我这个版本依然不行
v2.4.1

[Vue tip]: Event "sortchange" is emitted in component at /src/table.vue but the handler is registered for "sortChange". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "sort-change" instead of "sortChange".

[Prod] Cannot read property '__vueMarkdownOptions__' of undefined

in prod

"vue": "^2.5.17"
"vue-markdown-loader": "^2.4.1"
"vue-template-compiler": "^2.5.17"
"@vue/cli-service": "^3.0.5"

Module build failed (from ./node_modules/[email protected]@thread-loader/dist/cjs.js):
Thread Loader (Worker 1)
Cannot read property '__vueMarkdownOptions__' of undefined

    at Object.module.exports (/Users/jv/Desktop/project/vue-markdown-docs/node_modules/[email protected]@vue-markdown-loader/lib/markdown-compiler.js:71:46)

markdown-compiler.js

module.exports = function(source) {
  console.log('\r\n--- start ---')
  console.log(source)
  this.cacheable && this.cacheable();
  var parser, preprocess;
  var params = loaderUtils.getOptions(this) || {};
  if (!this._compilation) {
    console.log('\r\n--- undefined ---')
  } else {
    console.log('\r\n--- not undefined ---')
  }
  var vueMarkdownOptions = this._compilation.__vueMarkdownOptions__;
  var opts = vueMarkdownOptions ? Object.create(vueMarkdownOptions.__proto__) : {}; // inherit prototype
  var preventExtract = false;

result of dev mode

 INFO  Starting development server...
 27% building modules 148/152 modules 4 active ...7@core-js/modules/_to-absolute-index.js
--- start ---
## test


--- not undefined ---
 28% building modules 154/157 modules 3 active ...onents/test.md?vue&type=script&lang=js&
--- start ---
## test


--- not undefined ---
 28% building modules 155/157 modules 2 active ...onents/test.md?vue&type=script&lang=js&
--- start ---
## test

result of prod

⠙  Building for production...
--- start ---
## test


--- not undefined ---

--- start ---
## test


--- not undefined ---
⠸  Building for production...
--- start ---
## test


--- undefined ---
⠴  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                                                                            10:27:47

Module build failed (from ./node_modules/[email protected]@thread-loader/dist/cjs.js):
Thread Loader (Worker 1)
Cannot read property '__vueMarkdownOptions__' of undefined

    at Object.module.exports (/Users/jv/Desktop/project/vue-markdown-docs/node_modules/[email protected]@vue-markdown-loader/lib/markdown-compiler.js:74:46)

实时打包非常巨大,且不支持happypack

1. md部分打包非常巨大,暂不知晓原因.

2. 不支持happypack问题.
   vue-loader最新的版本已经修复了这个问题.
   但是vue-markdown-loader和happypack一起使用还是会报错.

    "vue-loader": "^14.2.1",
    "vue-markdown-loader": "^2.4.0",

ERROR in ./node_modules/vue-loader!./node_modules/vue-markdown-loader/lib/markdown-compiler.js?raw!./example/docs/table.md
Module build failed: TypeError: Cannot read property '__proto__' of undefined
    at Object.module.exports (D:\usr\node_modules\vue-markdown-loader\lib\markdown-compiler.js:68:46)
 @ ./example/docs/table.md 1:17-119
 @ ./example/docs .*\.md$
 @ ./example/router/index.js
 @ ./example/main.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./example/main.js

markdown 转 vue Syntax Error

webpack4 "vue-markdown-loader": "^2.4.1"

{
                test: /\.md$/,
                use: [
                    {
                        loader: 'vue-loader',
                        options: {
                            compilerOptions: {
                                whitespace: false
                            }
                        }
                    },
                    {
                        loader: 'vue-markdown-loader/lib/markdown-compiler'
                    }
                ]
            }

Failed to execute 'appendChild' on 'Node'

I'm using vue-markdown-loader with Nuxt.js and getting the above error.

When the code is by itself it works. However, when I add even one line of markdown under it, the Vue component example renders but stops working.

Here's an example snippet:

<script>
import CoinFlip from '~components/tasks/examples/CoinFlip.vue'

export default {
  components: {
    CoinFlip
  }
}
</script>

### Coin Flip
<div class="showcase">
  <CoinFlip />
</div>

<!-- ## More text ... -->

Could this be due to a problem with the markdown loader?

I opened but an issue on Nuxt repo as well. But I have a feeling its due to the way the loader is parsing the file.

In case you need to reproduce, here's the repo: https://github.com/encyjs/encyjs.org.

You may need an appropriate loader to handle this file type.

Hello & thanks for the plugin !

I'm trying to add to my project but getting an error message:

ERROR in ./src/stories/README.md Module parse failed: /home/cs/work/vue/test1/src/stories/README.md Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type. | # README | | @ ./src/stories/index.js 9:0-39 @ ./.storybook/config.js @ multi ./~/@storybook/vue/dist/server/config/polyfills.js ./~/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

Here is the webpack config file: https://github.com/metamn/vue/blob/master/test1/build/webpack.base.conf.js

And here is the code: https://github.com/metamn/vue/blob/master/test1/src/stories/index.js

Can you please advice me how to fix it? Thank you.

docsify和vue-markdown-loader结合使用

如题，两者能合着用最好了
不是vuep那种编辑实时预览

element-ui的文档是如何做到多区块例子的

element-ui的文档如何做到一个例子一个代码块，因为代码块里包括一个script标签，多个块岂不是有多个script标签，用vue-markdown-loader解析的markdown文件不是只能有一个template和script标签么

请问有考虑过支持多级目录的 markdown 文件么？

比如我有一个目录文件 SUMMARY.md

* [Introduction](README.md)
* [1. 燃料学](ch1/fuel.md)
* [2. 空气动力学](ch1/air.md)
* [3. 总装工程学](ch1/enginer.md)

最后生成的页面中点击该链接会提示 Cannot GET /ch1/air.md

md文件顶部插入style问题

自定义vueMarkdown未生效

Hi,

我的环境版本：
node 6.9.2
vue-markdown-loader 0.6.2
markdown-it 8.3.1

使用自定义方式设置vueMarkdown未生效

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

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

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

  vueMarkdown: markdown
};

core.js中代码如下

var opts = Object.assign(params, this.vueMarkdown, this.options.vueMarkdown)
if ({}.toString.call(opts.render) === '[object Function]') {
   parser = opts
} else {
   ... 
}

此时render在this.options.vueMarkdown原型链上，并未复制到opts上

hi，能否去了.first()开一个版本，如果js模块加载一次无法达到预期

 var output = {
    style: $.html('style'),
  
    script: $.html($('script').first())
  };

去除 .first()

Unknown custom element: <type>

when i wrote in markdown

<type>

in this case, throw error

[Vue warn]: Unknown custom element: <type> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

maybe, unkown html tag will be throw error in 'vue-markdown-loader'.

this is how I solved it simply

I used just backtick symbol

`<type>`

haha

webpack 4.0兼容

当前插件似乎无法兼容webpack 4，麻烦有时间看一下哈
https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

ERROR in ./src/components/mixin/demo/doc.md
Module build failed: TypeError: Cannot read property 'vueMarkdown' of undefined
    at Object.module.exports (/Users/zhouyujie/dev/meituan/overseas-info-web-copy/node_modules/vue-markdown-loader/lib/core.js:10:52)
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/mixin/demo/mixin.vue 15:11-30
 @ ./src/components/mixin/demo/mixin.vue
 @ ./src/components sync demo\/.*\.vue$
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/views/demos/demos.vue
 @ ./src/views/demos/demos.vue
 @ ./src/router/index.js
 @ ./src/app.js
 @ ./src/entry-client.js
 @ multi webpack-hot-middleware/client ./src/entry-client.js

不能 require 资源

要想个别的解决方法了，so sad

chainWebpack configuration breaks Vuetify integration

Adding markdown loader configuration into vue.config.js breaks vuetify loader functionality.
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
});

  }

[issue] Script tag cause error in production environment

• node -v 8.12.0
• "@vue/cli-service": "^3.0.5"
• "vue": "^2.5.17"
• "webpack": "^4.15.1"
• "vue-loader": "^15.4.2"

webpackConfig.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
       })

# TEST
<script>console.log(111)</script>

In development environment

Everything fine.

in production environment

Module build failed (from ./node_modules/[email protected]@thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Cannot read property '__vueMarkdownOptions__' of undefined

    at Object.module.exports (/Users/jv/Desktop/project/vue-markdown-docs/node_modules/[email protected]@vue-markdown-loader/lib/markdown-compiler.js:67:46)

Remove Script tag

build success..

Cannot read property '__vueMarkdownOptions__' of undefined

`Cannot read property 'vueMarkdownOptions' of undefined

at Object.module.exports (E:\binui2\node_modules\[email protected]@vue-markdown-loader\lib\markdown-compiler.js:67:46)

`

开发环境正常，只要md文件里面包含<script>就报错

vue-cli 3.0 下 markdown-it 的配置不生效

markdown-it 的配置不生效，怎么解决？

使用单文件组件写法时，js在有空行的情况下会报错

示例

methods为空

<template>
<p>
    This should be red.
</p>
</template>

<script>
export default {
    methods: {

    }
}
</script>

再比如

<template>
<p>
    This should be red.
</p>
</template>

<script>
export default {
    data() {
        // line1

        // line3
        return { test: 123 };
    }
}
</script>

报错信息：

Module build failed: SyntaxError: Unexpected token (98:0)

   96 |     data() {
   97 |         // line1
>  98 | <pre v-pre><code v-pre>    // line3
      | ^
   99 |     return { test: 125453 };
  100 | },
  101 | </code></pre>

md 文件插入script的问题

此md文件是否可以当做vue component被引用？

可否做成 vue-loader 的预处理 loader，在 <template lang='md'>#header1</template> 中处理markdown文件？

这里有个这样的loader，但通用性差了点： https://github.com/okoala/vue-antd-docs-loader

not work under cli-3 in Prod

"@vue/cli-service": "^3.0.5"
"vue-loader": "^15.4.2"
"webpack": "^4.15.1"

webpackConfig.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        preventExtract: false,
        preprocess: function (markdownIt, source) { return source },
        raw: true
      })

Above works in Dev, but not in Prod..

It report:

 ERROR  Failed to compile with 7 errors                                                                                                                                            13:37:38

Module build failed (from ./node_modules/[email protected]@thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Cannot read property '__vueMarkdownOptions__' of undefined

    at Object.module.exports (/Users/jv/Desktop/project/vue-markdown-docs/node_modules/[email protected]@vue-markdown-loader/lib/markdown-compiler.js:67:46)

then, I refactor vue-markdown-loader/index.js

module.exports = process.env.NODE_ENV === 'production' ?
  require('./lib/core') :
  require('./lib/markdown-compiler');

and modified loader config

.use('vue-markdown-loader')
      .loader('vue-markdown-loader')

now, No error reported in both Dev and Prod..
but, the chunk is empty..

dist/js/chunk-vendors.32edb056.js         129.44 kb        45.94 kb
  dist/js/app.119f3299.js                   11.98 kb         4.05 kb
  dist/precache-manifest.27ad7d8a0fb5742    1.95 kb          0.68 kb
  86a504fee5ec81207.js
  dist/js/chunk-2d22998c.cf913dd2.js        1.82 kb          0.88 kb
  dist/js/chunk-510ddfb8.260f7556.js        1.56 kb          0.76 kb
  dist/js/chunk-0c65d7d4.3e2bd1f5.js        1.45 kb          0.71 kb
  dist/js/chunk-2d20f179.4c9f3766.js        1.24 kb          0.66 kb
  dist/service-worker.js                    0.95 kb          0.54 kb
  dist/js/chunk-2d0d4006.2fec80ca.js        0.29 kb          0.24 kb
  dist/js/chunk-2d228c15.6642dcd8.js        0.29 kb          0.24 kb
  dist/js/chunk-2d22c353.6253a60a.js        0.29 kb          0.24 kb
  dist/js/chunk-2d20900a.907f3073.js        0.29 kb          0.24 kb
  dist/js/chunk-2d0b37b3.a2ed9b24.js        0.29 kb          0.24 kb
  dist/js/chunk-2d21b537.a0d0e569.js        0.29 kb          0.24 kb
  dist/js/chunk-2d0d7d7a.8d88fe70.js        0.28 kb          0.24 kb
  dist/js/chunk-2d22269e.69ef33d0.js        0.19 kb          0.17 kb
  dist/js/chunk-76d2465d.dbf8a03d.js        0.15 kb          0.14 kb
  dist/css/chunk-76d2465d.9771d7a6.css      23.13 kb         5.14 kb

then, I try to rafctor lib/core.js

...
var compiler = require('./markdown-compiler')
module.exports = function(source) {
  this.cacheable();
...
console.log(compiler.call(this, source)) // output: Vue Component
...
}

last, I don't know how to load Vue Component with vue-loader.

So, I fail.

Error with Webpack 4 and Vue Loader 15

Upgrade the dependencies of your package.json like this:

{
  "name": "vue-markdown-loader",
  "version": "2.4.1",
  "description": "markdown file to vue component loader.",
  "main": "index.js",
  "scripts": {
    "dev": "cd example && webpack-dev-server --inline --hot --port 8888 --open"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/QingWei-Li/vue-markdown-loader.git"
  },
  "keywords": [
    "vue",
    "markdown",
    "webpack",
    "loader"
  ],
  "author": "qingwei-li <[email protected]>",
  "license": "WTFPL",
  "bugs": {
    "url": "https://github.com/QingWei-Li/vue-markdown-loader/issues"
  },
  "homepage": "https://github.com/QingWei-Li/vue-markdown-loader#readme",
  "dependencies": {
    "cheerio": "^0.20.0",
    "highlight.js": "^9.4.0",
    "loader-utils": "^1.1.0",
    "markdown-it": "^8.4.0"
  },
  "peerDependencies": {
    "vue-loader": ">=10.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^7.1.3",
    "babel-preset-es2015": "^6.16.0",
    "css-loader": "^0.28.11",
    "github-markdown-css": "^2.3.0",
    "style-loader": "^0.21.0",
    "vue": "^2.0.3",
    "vue-loader": "^15.0.10",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

and import the Vue Loader plugin (it's required now) in your webpack.config.js:

var resolve = require("path").resolve;
var webpack = require("webpack");
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: "./src/entry.js",
  output: {
    path: resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["es2015"]
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.md$/,
        loader: resolve(__dirname, "../index.js"),
        options: {}
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

You'll get an error like that: Component template requires a root element, rather than just text

如何使.md文件中的vue代码语法高亮？

在webpack中使用了默认配置

{
  test: /\.md$/,
  loader: 'vue-markdown-loader'
  }

.md中的内容大致如下：

```vue
<template>
  <div id="app">
    <fullscreen ref="fullscreen" :fullscreen.sync="fullscreen">
      Content
    </fullscreen>
    <button type="button" @click="toggle" >Fullscreen</button>
  </div>
</template>
<script>
  import Fullscreen from 'vue-fullscreen'
  export default {
    methods: {
      toggle () {
        this.$refs['fullscreen'].toggle()
      }
    },
    data() {
      return {
        fullscreen: false
      }
    }
  }
</script>
```.

实际效果是整个代码块都包裹在<code v-pre class="language-vue">元素中，没有被解析高亮。
尝试把 ``vue改写成 ``html，结果编译就报错了，webpack会试图解析本该是代码示例的script块中的import语句。
求指点，非常感谢。

在 `.md` 文件中使用 <template> 标签时，首行不会被解析。

描述

在 .md 文件中使用 标签时，首行须要插入一个换行符才能被正确解析。

复现

输入

<template>
# Title

Lorem Ipsum
</template>

期望输出

<h1>Title</h1>
<p>Lorem Ipsum</p>

实际输出

# Title
<p>Lorem Ipsum</p>

验证

在 <template> 标签首行增加一个换行符，即可得到正确的输出结果。

<template>

# Title

Lorem Ipsum
</template>

希望提升markdown-it的版本

markdown-it 8.x版本修复了6.x版本的一个bug
例
markdown-it\lib\renderer.js 71行
tmpAttrs[i]+= ' ' + options.langPrefix + langName;
-->修复为
tmpAttrs[i][i]+= ' ' + options.langPrefix + langName;
在6.x版本中不能正确的合并class

不支持mustache{{ }}写法啊

举例：

<checker 
    :value.sync="demo1Selected" 
    default-item-class="demo1-item" 
    selected-item-class="demo1-item-selected" 
    @on-change="onChange"
  >
    <checker-item 
      v-for="item in demo1" 
      track-by="$index" 
      :value="item.code" 
      :name="item.name" 
      @on-item-click="demo1Selected = item.code"
    >
    {{ item.code }}
  </checker-item>
</checker>

这个时候{{item.code}}就消失了

Support Webpack 4

Support Webpack 4

Improvements for use with <template lang="md">

This references the word I did on this fork/branch: https://github.com/PointSource/vue-markdown-loader/tree/vue-file-support

The use case I'd like to improve is creating a .vue file with <template lang="md">. It currently works if you use vue-markdown-loader as the loader for those markdown files, but there are a couple of issues:

• Hot reload seems to be unreliable
• Scoped styles won't work

Since this use case has vue-loader as the very first loader in the chain, this fork removes a bunch of code that deals with parsing out the <script> and <styles> tags, and running the result through vue-loader.

For this to work, I submitted a PR to vue-loader (vuejs/vue-loader#595) that will add the template-compiler loader to any loader used for the <template> tag that is specified in the webpack configuration.

I'm opening this issue to start a discussion on whether you're interested in merging these 2 use cases, code, etc. I think it might be possible to inspect the loader command line and select the mode of operation, but wanted to get your thoughts first.

Let me know. Thanks!

属性名还是被小写了

lowerCaseAttributeNames: false, 虽然看到了这个选项

不支持.vue文件script

错误示范

1.不支持script写法

<script>
import { Group, Cell } from '@wac/wux'

export default {
  components: {
    Group,
    Cell
  }
}
</script>

1. 不支持style写法

<style>
@import '~@wac/wux/dist/wux.css';
</style>

ERROR in ./~/babel-loader!./~/eslint-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/pages/README.md
Module not found: Error: Cannot resolve module '@wac/wux' in /work/FE/vue/wux-docs/src/pages
 @ ./~/babel-loader!./~/eslint-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./src/pages/README.md 7:11-30

webpack2+下使用webpack-dev-server会有多次编译的情况

具体demo：
https://github.com/jschyz/vue-markdown

查到原因如下：
webpack2 使用新的 watch 文件模式，文件更变，dev-server 将会触发重编译事件
而 vue-markdown-loader 是将生成的 .vue文件生放置 _cache 文件夹处，文件发生变动，触发多次编译！

流程图如下：

'vue-markdown-loader' + 'cssnext' seems to break style during build.

If I try with npm run dev, it's just okay. But if try to npm run build, It broke the component's style.

Here is example.

https://github.com/dfdgsdfg/vue-markdown-cssnext-test

npm run dev result:

npm run build result:

Any clues?

md 插入 script 解析error

v-cli3

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,
            preventExtract: false,
            use: [
                [require('markdown-it-anchor'), {
                    level: 2,
                    slugify: slugify,
                    permalink: true,
                    permalinkBefore: true
                }],
                [require('markdown-it-container'), 'demo', {
                    validate: function (params) {
                        return params.trim().match(/^demo\s*(.*)$/)
                    },
                    render: function (tokens, idx) {
                        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);

                        if (tokens[idx].nesting === 1) {
                            var title = (m && m.length > 1) ? m[1] : '';
                            var desc = '';
                            var content = tokens[idx + 1].content;

                            if (!content) {
                                content = tokens[idx + 4].content;
                                desc = tokens[idx + 2].content;
                                // 移除描述，防止被添加到代码块
                                tokens[idx + 2].children = [];
                            }

                            var html = _convert(_strip(content, [])).replace(/(<[^>]*)=""(?=.*>)/g, '$1');

                            return `<demo-block>
                                    <div slot="source">${html}</div>
                                    <div slot="title">${title}</div>
                                    <div slot="desc">${md.renderInline(desc)}</div>
                                    <div slot="highlight">`;
                        }
                        return '</div></demo-block>\n';
                    }
                }]
            ]
       })
}

md 文件 不加入 script 标签能被解析， 加入了之后仿佛按照 vue 文件去解析了， 就报错。

How to customise table

As title, I hope table rendered:

<table class="custom-classname"></table>

Is it ignoring new lines?

Hello! Thanks for this awesome loader!

I am having a issue

This is the markdown file

This is the rendered markdown

See? The text are all together, this is the default behavior?

Am I doing something wrong?

Thanks (:

[Vue warn]: Invalid Component definition: with `vue.config.js`

Here is my code in vue.config.js, which is used by vue cli 3.0:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("pdf")
      .test(/\.pdf/)
      .use("")
      .loader("file-loader")
    config.module
      .rule("md")
      .test(/\.md/)
      .use("vue-loader")
      .loader("vue-loader")
      .loader("vue-markdown-loader/lib/markdown-compiler")
      .tap(options => {
        raw: true
      })
  }
}

The PDF loader works fine, but the vue-markdown-loader gives me this error in Chrome:

[Vue warn]: Invalid Component definition: <template><section><h1....

It appears that the markdown is being parsed correctly into html, and then into a vue component, but why it is not loading into the app? Thanks for the help.

This is the component I'm using the markdown in:

<template lang="pug">
page(title="Trademark" subtitle="Learn about the guidelines for Cosmos trademark usage.")
  text-container
    page-content
</template>

<script>
import PageContent from "content/md/trademark.md"
import Page from "common/NiPage"
import Part from "common/NiPart"
import TextContainer from "common/NiTextContainer"
export default {
  name: "page-design-trademark",
  metaInfo: { title: "Trademark" },
  components: {
    Page,
    Part,
    TextContainer,
    PageContent
  }
}
</script>

能否添加新选项，支持多script

你好，

我在使用你的这个loader，实现了markdown转换vue，非常方便做UI库的文档展示。

我注意到你限制了script的调用，只执行了第一个script标签。
但是在很多UI demo展示页面，我们需要在每个demo-block中都使用script标签。

能否提供一个options，让我们选择是否调用所有的scirpt？我了解vuejs也限制了script数量唯一。

但是能否将所有script的merge下，然后统一执行？
我们就能简单实现多script，只需要注意不同demo之间使用不同的属性或者方法即可。（比如 demo1：onFocus1。demo2“：onFocus2）

使用版本为
"vue": "^2.5.16",
"vue-template-compiler": "^2.5.16",
"webpack": "^2.6.1",

Component inside markdown file

Thank you for the plugin!

Is there a way to have Vue components inside the markdown file?

Thanks again!

为什么我以组件的方式导入 .md 的时候，它名字后面会多个null

而且只有文件确实在哪个目录，才会多出null字符

ERROR in ./docs/Test.md
Module not found: Error: Cannot resolve 'file' or 'directory' ./Test.mdnull in /Users/kevin/VueProjects/labu.*.com/docs
 @ ./docs/Test.md 1:17-146

webpack conf 是最基本的：

      {
        test: /\.md$/,
        loader: 'vue-markdown-loader'
      }

HTML self-closing tags aren't handled correctly

Works with paired open/close tags

Here is an empty element with a closing tag. Everything works when I have an opening/closing tag pair.

Source:

<h4>
  <i class="fa fa-twitter fa-fw"></i>
  Tweets from ...
</h4>

HTML:

Tweets from ...

Fails with self-closing tags

Here is an empty element with a self-closing tag. It appears that the <i> tag is closed after Tweets from ..., rather than before, resulting in the <i> element being larger than intended, and the Tweets from ... is italicized, which is not correct.

Source:

<h4>
  <i class="fa fa-twitter fa-fw"/>
  Tweets from ...
</h4>

HTML:

Tweets from ...

Workaround: Don't use self-closing tags

This is unsatisfactory, as my ESLint setup encourages the use of self-closing tags for empty elements.

---

Demo of bug: https://glitch.com/edit/#!/vue-markdown-loader-bug

能支持锚点吗？

vue-router改成了history模式，不知道能支持锚点吗？

组件如用emit方法，在md中使用该组件emit无效

比如我有一个组件有个方法用到emit

  methods: {
    closeAside: function() {
      this.$emit('closeAside')
    }
  }

然后父组件
@closeAside="xxx.show = false"

我在vue中使用这个组件亲测是可以成功触发改变show值的，但是我把这个组件用在md文件中就没反应。

希望dalao有空帮忙解答一下