Md2Vue-loader
A loader to parse markdown file to a vue template file. The loader will parse the marked file to a template for vue-loader to parse.
You can also to use options.directOutput
to output direct Vue file without template.
Usage
- Install md2vue-loaer
npm install --save-dev md2vue-loader
- Config the webpack config file to parse markdown file.
module: rules: test: /\.md$/ loader: 'vue-loader' 'md2vue-loader'
API
Loader options
- template: the template file to generator.
Example:
module: rules: test: /\.md$/ loader: 'vue-loader' loader: 'md2vue-loader' options: template: 'path/to/template-file' headingId: false // heading render id. [https://github.com/chjj/marked/issues/806] directOutput: false
Example
Let's look at a example.
input file source
## Usage Use the button component ```html<h2>This is the Vue Component!</h2><t-button></t-button>``` ````javascriptimport TButton from 'components/button' export default { components: { TButton }}```` ```cssbutton { color: red;}```
output source
This is the Vue Component! UsageUse the button component <template> <h2>This is the Vue Component!</h2><t-button></t-button></template> <script> import TButton from 'components/button' export default { components: { TButton }}</script> <style> button { color: red;}</style>
Todos
- Multiple Markdown files to loader.
- Code highlight configurable.
- id add prefixer