{"id":13423864,"url":"https://github.com/QingWei-Li/vue-markdown-loader","last_synced_at":"2025-03-15T17:32:17.284Z","repository":{"id":8945995,"uuid":"60324231","full_name":"QingWei-Li/vue-markdown-loader","owner":"QingWei-Li","description":"📇 Convert Markdown file to Vue2.0 component.","archived":false,"fork":false,"pushed_at":"2022-12-10T16:07:18.000Z","size":657,"stargazers_count":704,"open_issues_count":33,"forks_count":163,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-09T11:02:23.509Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QingWei-Li.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-03T06:34:56.000Z","updated_at":"2025-02-28T08:29:54.000Z","dependencies_parsed_at":"2023-01-13T15:05:14.724Z","dependency_job_id":null,"html_url":"https://github.com/QingWei-Li/vue-markdown-loader","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-markdown-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-markdown-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-markdown-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QingWei-Li%2Fvue-markdown-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QingWei-Li","download_url":"https://codeload.github.com/QingWei-Li/vue-markdown-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243527761,"owners_count":20305270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T00:00:44.044Z","updated_at":"2025-03-15T17:32:17.250Z","avatar_url":"https://github.com/QingWei-Li.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js","JavaScript","叫研发工具组","Components \u0026 Libraries","Dev Tools","Dev Tools [🔝](#readme)","UI Components / UI Tools"],"sub_categories":["Development Tools","文档","Dev Tools","Docs"],"readme":"You have other better choices\n\n- https://github.com/egoist/vmark\n- https://github.com/liril-net/ware-loader\n- https://github.com/wxsms/vue-md-loader\n\n---------\n\n# vue-markdown-loader\n\n[![npm](https://img.shields.io/npm/v/vue-markdown-loader.svg?style=flat-square)](https://www.npmjs.com/package/vue-markdown-loader)\n![vue](https://img.shields.io/badge/vue-2.x-4fc08d.svg?colorA=2c3e50\u0026style=flat-square)\n\n\u003e Convert Markdown file to Vue Component using markdown-it.\n\n## Example\n\n- https://github.com/mint-ui/docs\n- https://github.com/elemefe/element\n\n## Live demo\n\nhttps://glitch.com/edit/#!/vue-markdown\n\n## Installation\n\n```bash\n# For Vue1\nnpm i vue-markdown-loader@0 -D\n\n# For Vue2\nnpm i vue-markdown-loader -D\nnpm i  vue-loader vue-template-compiler -D\n```\n\n## Feature\n\n- Hot reload\n- Write vue script\n- Code highlight\n\n## Usage\n\n[Documentation: Using loaders](https://webpack.js.org/concepts/loaders/)\n\n`webpack.config.js` file:\n\n```javascript\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        loader: 'vue-markdown-loader'\n      }\n    ]\n  }\n};\n```\n\n### With `vue-loader 15`\n\n```js\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: 'vue-loader'\n      },\n      {\n        test: /\\.md$/,\n        use: [\n          {\n            loader: 'vue-loader'\n          },\n          {\n            loader: 'vue-markdown-loader/lib/markdown-compiler',\n            options: {\n              raw: true\n            }\n          }\n        ]\n      }\n    ]\n  },\n  plugins: [new VueLoaderPlugin()]\n};\n```\n\n### With Vue CLI 3\n\nIn your `vue.config.js` file:\n\n```js\nmodule.exports = {\n  chainWebpack: config =\u003e {\n    config.module.rule('md')\n      .test(/\\.md/)\n      .use('vue-loader')\n      .loader('vue-loader')\n      .end()\n      .use('vue-markdown-loader')\n      .loader('vue-markdown-loader/lib/markdown-compiler')\n      .options({\n        raw: true\n      })\n  }\n}\n```\n\n## Options\n\n### `preventExtract`\n\nSince `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\n\n```js\n{\n  test: /\\.md$/,\n  loader: 'vue-markdown-loader',\n  options: {\n    preventExtract: true\n  }\n}\n```\n\n### `wrapper`\n\nYou can customize wrapper tag no matter html element tag or vue component tag. Default is 'section'\n\n```js\n{\n  test: /\\.md$/,\n  loader: 'vue-markdown-loader',\n  options: {\n    wrapper: 'article',\n  }\n}\n```\n\n### `markdownIt`\n\nreference [markdown-it](https://github.com/markdown-it/markdown-it#init-with-presets-and-options)\n\n```javascript\n{\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        loader: 'vue-markdown-loader',\n        options: {\n          // markdown-it config\n          preset: 'default',\n          breaks: true,\n          preprocess: function(markdownIt, source) {\n            // do any thing\n            return source;\n          },\n          use: [\n            /* markdown-it plugin */\n            require('markdown-it-xxx'),\n            /* or */\n            [require('markdown-it-xxx'), 'this is options']\n          ]\n        }\n      }\n    ];\n  }\n}\n```\n\nOr you can customize `markdown-it`\n\n```javascript\nvar markdown = require('markdown-it')({\n  html: true,\n  breaks: true\n})\n\nmarkdown\n  .use(plugin1)\n  .use(plugin2, opts, ...)\n  .use(plugin3);\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        loader: 'vue-markdown-loader',\n        options: markdown\n      }\n    ]\n  }\n};\n```\n\n### Add Vue configuration\n\n```js\nvar webpack = require('webpack');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.md$/,\n        loader: 'vue-markdown-loader'\n      }\n    ]\n  },\n\n  plugins: [\n    new webpack.LoaderOptionsPlugin({\n      vue: {}\n    })\n  ]\n};\n```\n\n## License\n\nWTFPL\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQingWei-Li%2Fvue-markdown-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FQingWei-Li%2Fvue-markdown-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FQingWei-Li%2Fvue-markdown-loader/lists"}