Markdown to Vue component loader for Webpack.
npm install markdown-to-vue-loader  
> Markdown to Vue component loader for Webpack.
- The built-in markdown parser is markdown-it.
- Examples.
- 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.
``shell`
npm install markdown-to-vue-loader vue-loader webpack --save-dev
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',
},
},
};
`
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();
},
};
- Type: Object
- Default:
`js`
{
decodeEntities: false,
lowerCaseAttributeNames: false,
lowerCaseTags: false,
}
The options for the load method of the cheerio.
- Type: Function
- Default:
- Example:
`js`
{
configureMarkdownIt(md) {
md.set(...)
.use(...);
}
}
Checkout the documentation of MarkdownIt for more information.
- Type: String
- Default:
The namespace for component name.
For example, if this is set to 'awesome-component', then given this input (example.md):
``markdownExample
` Hello, World!vue`
will generate (example.vue):
`html`
Example
<template>
<p>Hello, World!</p>
</template>
- 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):
``markdownExample
` Hello, World!html`
will generate (example.vue):
`html`
Example
<p>Hello, World!</p>
- Type: Boolean
- Default:
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!
`
- Type: Array
- Default:
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):
``markdownExample
` Hello, World!js`
export default {
template: '
}
will generate (example.vue):
`html`
Example
export default {
template: '<p>Hello, World!</p>'
}
- 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.
- Type: String
- Default:
- Example:
The class name for each
element.$3
- Type:
String
- Default:
- Example: The wrapper for each
element. Supports to use Vue component as the wrapper.$3
- Type:
String
- Default:
- Example: The class name for each
element.$3
- 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 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 option.For example, given this input (
example.md):``markdown
Example
`js
export default {
template: 'Hello, World!
'
};
`vue
Hello, World!
`
will generate (
):`html
Example
export default {
template: '<p>Hello, World!</p>'
};
<template>
<p>Hello, World!</p>
</template>
`Scoped CSS
When a
will render as this:
html
Hello, World!
``Maintained under the Semantic Versioning guidelines.