Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fengyuanchen/markdown-to-vue-loader
Markdown to Vue component loader for Webpack.
https://github.com/fengyuanchen/markdown-to-vue-loader
markdown vue vue-component webpack-loader
Last synced: about 7 hours ago
JSON representation
Markdown to Vue component loader for Webpack.
- Host: GitHub
- URL: https://github.com/fengyuanchen/markdown-to-vue-loader
- Owner: fengyuanchen
- License: mit
- Created: 2017-09-15T14:08:51.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2023-05-09T14:33:46.000Z (over 1 year ago)
- Last Synced: 2024-10-31T21:47:22.114Z (16 days ago)
- Topics: markdown, vue, vue-component, webpack-loader
- Language: JavaScript
- Homepage: https://fengyuanchen.github.io/markdown-to-vue-loader
- Size: 1.23 MB
- Stars: 39
- Watchers: 3
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# markdown-to-vue-loader
[](https://codecov.io/gh/fengyuanchen/markdown-to-vue-loader) [](https://www.npmjs.com/package/markdown-to-vue-loader) [](https://www.npmjs.com/package/markdown-to-vue-loader)
> Markdown to Vue component loader for [Webpack](https://webpack.js.org/).
- The built-in markdown parser is [**markdown-it**](https://github.com/markdown-it/markdown-it).
- [Examples](https://fengyuanchen.github.io/markdown-to-vue-loader).
## Features
- Supports Vue 2 and Vue 3.
- Supports loading a markdown file as a Vue component.
- Supports loading code blocks (Vue and HTML by default) as Vue components.
- Supports 10 [options](#options).
## Getting started
### Installation
```shell
npm install markdown-to-vue-loader vue-loader webpack --save-dev
```
### Usage
Within your `webpack.config.js` configuration object, you'll need to add the **markdown-to-vue-loader** to the list of modules, like so:
```js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.md$/,
use: [
'vue-loader',
{
loader: 'markdown-to-vue-loader',
options: {
// ...
},
},
],
},
],
},
resolve: {
alias: {
// Vue 2
// vue$: 'vue/dist/vue.esm.js',
// Vue 3
vue$: 'vue/dist/vue.esm-bundler',
},
},
};
```
### Usage for Vue CLI
Within your `vue.config.js` configuration file, you'll need to add the **markdown-to-vue-loader** to the `chainWebpack`, like so:
```js
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module
.rule('markdown')
.test(/\.md$/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('markdown-to-vue-loader')
.loader('markdown-to-vue-loader')
.options({
// ...
})
.end();
},
};
```
## Options
### cheerioLoadOptions
- Type: `Object`
- Default:
```js
{
decodeEntities: false,
lowerCaseAttributeNames: false,
lowerCaseTags: false,
}
```
The options for the `load` method of the [**cheerio**](https://github.com/cheeriojs/cheerio).
### configureMarkdownIt
- Type: `Function`
- Default: `null`
- Example:
```js
{
configureMarkdownIt(md) {
md.set(...)
.use(...);
}
}
```
Checkout the documentation of [MarkdownIt](https://markdown-it.github.io/markdown-it/) for more information.
### componentNamespace
- Type: `String`
- Default: `'component'`
The namespace for component name.
For example, if this is set to `'awesome-component'`, then given this input (`example.md`):
````markdown
# Example
```vue
Hello, World!
```
````
will generate (`example.vue`):
```html
Example
<template>
<p>Hello, World!</p>
</template>
module.exports = {
components: {
'awesome-component-example-0': {
template: '<p>Hello, World!</p>'
}
}
};
```
### componentWrapper
- Type: `String`
- Default: `''`
The wrapper for component content. Supports to use Vue component as the wrapper.
For example, if this is set to `''`, then given this input (`example.md`):
````markdown
# Example
```html
Hello, World!
```
````
will generate (`example.vue`):
```html
Example
<p>Hello, World!</p>
module.exports = {
components: {
'component-example-0': {
template: '<p>Hello, World!</p>'
}
}
};
```
### exportSource
- Type: `Boolean`
- Default: `false`
Export source markdown text.
If this is set to `true`, then you can get the source from the Vue component's `source` property.
For example (`example.md`):
```markdown
# Hello, World!
```
```js
import Example from 'example.md';
console.log(Example.source);
// > # Hello, World!
```
### languages
- Type: `Array`
- Default: `['vue', 'html']`
The code blocks of these languages will be loaded as Vue components be default.
For example, if this is set to `['js']`, then given this input (`example.md`):
````markdown
# Example
```js
export default {
template: '
Hello, World!
'
}
```
````
will generate (`example.vue`):
```html
Example
export default {
template: '<p>Hello, World!</p>'
}
module.exports = {
components: {
'component-example-0': {
template: '<p>Hello, World!</p>'
}
}
};
```
### markdownItOptions
- Type: `Object`
- Default:
```js
{
html: true,
linkify: true,
typographer: true,
}
```
- Example:
```js
{
typographer: false,
highlight(str, lang) {
return '';
},
}
```
The options for the built-in markdown parser [**markdown-it**](https://github.com/markdown-it/markdown-it).
### preClass
- Type: `String`
- Default: `''`
- Example: `'prettyprint'`
The class name for each `
` element.
### preWrapper
- Type: `String`
- Default: `''`
- Example: `'
'`
The wrapper for each `
` element. Supports to use Vue component as the wrapper.
### tableClass
- Type: `String`
- Default: `''`
- Example: `'table table-bordered border-striped'`
The class name for each `` element.
### tableWrapper
- Type: `String`
- Default: `''`
- Example: `'
'`
The wrapper for each `` element. Supports to use Vue component as the wrapper.
## Inline comment options
- ``
- ``
If a code block has a `` comment before it, then the loader will load it as a Vue component, even though its language is **NOT** specified in the [`languages`](#languages) option.
Conversely, if a code block has a `` comment before it, then the loader will **NOT** load it as a Vue component, even though its language is specified in the [`languages`](#languages) option.
For example, given this input (`example.md`):
````markdown
# Example
```js
export default {
template: '
Hello, World!
'
};
```
```vue
Hello, World!
```
````
will generate (`example.vue`):
```html
Example
export default {
template: '<p>Hello, World!</p>'
};
<template>
<p>Hello, World!</p>
</template>
module.exports = {
components: {
'component-example-0': {
template: '<p>Hello, World!</p>'
}
}
};
```
## Scoped CSS
When a `` tag has the `scoped` attribute, its CSS will apply to elements of the current component only.
For example, given this input:
```html
<template>
<p>Hello, World!</p>
</template>
<style scoped>
p {
color: green;
}
```
will render as this:
```html
Hello, World!
.component-example-0 p {
color: green;
}
```
## Versioning
Maintained under the [Semantic Versioning guidelines](https://semver.org/).
## License
[MIT](https://opensource.org/licenses/MIT) © [Chen Fengyuan](https://chenfengyuan.com/)