Skip to content
A webpack loader that transform markdown to vue component. Extracted from Vuepress.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
packages
scripts
.editorconfig
.gitignore
.prettierrc.js
CHANGELOG.md
README-CN.md
README.md
lerna.json
package.json
yarn.lock

README.md

vue-markdown-loader

简体中文

This is a webpack loader that convert .md file to vue sfc(which can be loaded via vue-loader).

The project is inspired by vuepress, we reused most of its source code and made some improvements to allow it being used in non-vuepress project.

If you like Vuepress, please visit vuepress and star it. 😄

screenshot

Install

npm i @tianyong90/vue-markdown-loader -S

Useage

  1. configure

add loader rules for .md files in webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
      test: /\.md$/,
      use: [
        {
          loader: 'vue-loader',
          options: {
            compilerOptions: {
              preserveWhiteSpace: false
            }
          }
        },
        {
          loader: '@tianyong90/vue-markdown-loader',
          options: {
            // sourceDir: ''
            contentCssClass: 'markdown-body',
            markdown: {
              lineNumbers: true, // enable line numbers
            }
          }
        }
      ]
    }
  ]
},
// other options
  1. import md file as vue single file component
<template>
  <Hello />
</template>

<script scoped>
import Hello from 'hello.md'

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

<style>
// add styles for rendered markdown elements
</style>

License

MIT

You can’t perform that action at this time.