Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/QingWei-Li/vue-markdown-loader
📇 Convert Markdown file to Vue2.0 component.
https://github.com/QingWei-Li/vue-markdown-loader
Last synced: about 2 months ago
JSON representation
📇 Convert Markdown file to Vue2.0 component.
- Host: GitHub
- URL: https://github.com/QingWei-Li/vue-markdown-loader
- Owner: QingWei-Li
- Created: 2016-06-03T06:34:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:07:18.000Z (about 2 years ago)
- Last Synced: 2024-05-22T18:32:37.197Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 642 KB
- Stars: 704
- Watchers: 10
- Forks: 165
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-markdown-loader - it. (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Development Tools)
- awesome-vuejs - vue-markdown-loader ★2 - it. (Awesome Vue.js / Development Tools)
- awesome-github-star - vue-markdown-loader - Li | 707 | (JavaScript)
- awesome-list - vue-markdown-loader, 使用markdown-it将markdown组件转化为vue组件
- awesome - QingWei-Li/vue-markdown-loader - 📇 Convert Markdown file to Vue2.0 component. (JavaScript)
- awesome - QingWei-Li/vue-markdown-loader - 📇 Convert Markdown file to Vue2.0 component. (JavaScript)
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
[](https://www.npmjs.com/package/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
```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