{"id":13669987,"url":"https://github.com/unplugin/unplugin-vue-markdown","last_synced_at":"2026-02-26T12:10:55.568Z","repository":{"id":37407545,"uuid":"504757857","full_name":"unplugin/unplugin-vue-markdown","owner":"unplugin","description":"Compile Markdown to Vue component","archived":false,"fork":false,"pushed_at":"2025-09-24T00:02:01.000Z","size":1613,"stargazers_count":611,"open_issues_count":18,"forks_count":37,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-20T13:47:21.663Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unplugin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"open_collective":"antfu","github":["antfu"]}},"created_at":"2022-06-18T05:56:46.000Z","updated_at":"2026-02-12T21:05:53.000Z","dependencies_parsed_at":"2023-09-06T01:58:07.157Z","dependency_job_id":"a436e633-ace5-434a-a09f-aecbc98c6168","html_url":"https://github.com/unplugin/unplugin-vue-markdown","commit_stats":null,"previous_names":["mdit-vue/unplugin-vue-markdown","mdit-vue/vite-plugin-vue-markdown","unplugin/unplugin-vue-markdown"],"tags_count":93,"template":false,"template_full_name":null,"purl":"pkg:github/unplugin/unplugin-vue-markdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unplugin","download_url":"https://codeload.github.com/unplugin/unplugin-vue-markdown/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue-markdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29857307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T08:51:08.701Z","status":"ssl_error","status_checked_at":"2026-02-26T08:50:19.607Z","response_time":89,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-08-02T09:00:28.547Z","updated_at":"2026-02-26T12:10:55.532Z","avatar_url":"https://github.com/unplugin.png","language":"TypeScript","readme":"# unplugin-vue-markdown\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-vue-markdown?color=a1b858)](https://www.npmjs.com/package/unplugin-vue-markdown)\n\nCompile Markdown to Vue component.\n\n- 📚 Use Markdown as Vue components.\n- 💚 Use Vue components in Markdown.\n- 🔌 Supports Vite, Webpack, Vue CLI and more, powered by [unplugin](https://github.com/unjs/unplugin).\n- ⚡️ The same transformation as [VitePress](https://vitepress.vuejs.org/).\n\n## Install\n\n```bash\nnpm i unplugin-vue-markdown\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport Vue from '@vitejs/plugin-vue'\nimport Markdown from 'unplugin-vue-markdown/vite'\n\nexport default defineConfig({\n  plugins: [\n    Vue({\n      include: [/\\.vue$/, /\\.md$/], // \u003c-- allows Vue to compile Markdown files\n    }),\n    Markdown({ /* options */ }),\n  ],\n})\n```\n\nExample: [`examples/vite`](./examples/vite/)\n\n\u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nconst Markdown = require('unplugin-vue-markdown/webpack')\nconst { VueLoaderPlugin } = require('vue-loader')\n\nmodule.exports = {\n  /* ... */\n  module: {\n    rules: [\n      // ... other rules\n      {\n        test: /\\.(vue|md)$/,\n        loader: 'vue-loader'\n      }\n    ]\n  },\n  plugins: [\n    new VueLoaderPlugin(),\n    Markdown({ /* options */ })\n  ]\n}\n```\n\n\u003cbr\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nconst Markdown = require('unplugin-vue-markdown/webpack')\n\nmodule.exports = {\n  parallel: false, // Disable thread-loader which will cause errors, we are still investigating the root cause\n  chainWebpack: (config) =\u003e {\n    config.module\n      .rule('vue')\n      .test(/\\.(vue|md)$/) // \u003c-- allows Vue to compile Markdown files\n\n    config\n      .plugin('markdown')\n      .use(Markdown({\n        markdownItUses: [\n          prism,\n        ],\n      }))\n  },\n}\n```\n\nExample: [`examples/vue-cli`](./examples/vue-cli/)\n\n\u003cbr\u003e\n\u003c/details\u003e\n\n## Import Markdown as Vue components\n\n```html\n\u003ctemplate\u003e\n  \u003cHelloWorld /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HelloWorld from './README.md'\n\nexport default {\n  components: {\n    HelloWorld,\n  },\n}\n\u003c/script\u003e\n```\n\n## Use Vue Components inside Markdown\n\nYou can even use Vue components inside your markdown, for example\n\n```html\n\u003cCounter :init='5'/\u003e\n```\n\n\u003cCounter :init='5'/\u003e\n\nNote you can either register the components globally, or use the `\u003cscript setup\u003e` tag to register them locally.\n\n```ts\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport Counter from './Counter.vue'\n\nconst app = createApp(App)\n\n// register global\napp.component('Counter', Counter) // \u003c--\n\napp.mount()\n```\n\n```html\n\u003cscript setup\u003e\nimport { Counter } from './Counter.vue'\n\u003c/script\u003e\n\n\u003cCounter :init='5'/\u003e\n```\n\nOr you can use [`unplugin-vue-components`](#work-with-unplugin-vue-components) for auto components registration.\n\n## Frontmatter\n\nFrontmatter will be parsed and inject into Vue's instance data `frontmatter` field.\n\nFor example:\n\n```md\n---\nname: My Cool App\n---\n\n# Hello World\n\nThis is {{frontmatter.name}}\n```\n\nWill be rendered as\n\n```html\n\u003ch1\u003eHello World\u003c/h1\u003e\n\u003cp\u003eThis is My Cool App\u003c/p\u003e\n```\n\nIt will also be passed to the wrapper component's props if you have set `wrapperComponent` option.\n\n## Document head and meta\n\nTo manage document head and meta, you would need to install [`@unhead/vue`](https://unhead.harlanzw.com/integrations/vue/setup) and do some setup.\n\n```bash\nnpm i @unhead/vue\n```\n\n```js\n// vite.config.js\nimport Vue from '@vitejs/plugin-vue'\nimport Markdown from 'unplugin-vue-markdown/vite'\n\nexport default {\n  plugins: [\n    Vue({\n      include: [/\\.vue$/, /\\.md$/],\n    }),\n    Markdown({\n      headEnabled: true // \u003c--\n    })\n  ]\n}\n```\n\n```js\n// src/main.js\nimport { createHead } from '@unhead/vue' // \u003c--\nimport { createApp } from 'vue'\n\nconst app = createApp(App)\n\nconst head = createHead() // \u003c--\napp.use(head) // \u003c--\n```\n\nThen you can use frontmatter to control the head. For example:\n\n```yaml\n---\ntitle: My Cool App\nmeta:\n  - name: description\n    content: Hello World\n---\n```\n\nFor more options available, please refer to [`@unhead/vue`'s docs](https://unhead.harlanzw.com/integrations/vue/setup).\n\n## Options\n\n`unplugin-vue-markdown` uses [`markdown-it`](https://github.com/markdown-it/markdown-it) under the hood, see [`markdown-it`'s docs](https://markdown-it.github.io/markdown-it/) for more details\n\n```ts\n// vite.config.js\nimport MarkdownItAnchor from 'markdown-it-anchor'\nimport MarkdownItPrism from 'markdown-it-prism'\nimport Markdown from 'unplugin-vue-markdown/vite'\n\nexport default {\n  plugins: [\n    Markdown({\n      // default options passed to markdown-it\n      // see: https://markdown-it.github.io/markdown-it/\n      markdownItOptions: {\n        html: true,\n        linkify: true,\n        typographer: true,\n      },\n      // A function providing the Markdown It instance gets the ability to apply custom settings/plugins\n      markdownItSetup(md) {\n        // for example\n        md.use(MarkdownItAnchor)\n        md.use(MarkdownItPrism)\n      },\n      // Class names for the wrapper div\n      wrapperClasses: 'markdown-body'\n    })\n  ],\n}\n```\n\nSee [the tsdoc](./src/types.ts) for more advanced options\n\n## Example\n\nSee the [/examples](./examples).\n\nOr the pre-configured Markdown template [Vitesse](https://github.com/antfu/vitesse).\n\n## Integrations\n\n### Work with [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages)\n\n```ts\nimport Vue from '@vitejs/plugin-vue'\nimport Markdown from 'unplugin-vue-markdown/vite'\nimport Pages from 'vite-plugin-pages'\n\nexport default {\n  plugins: [\n    Vue({\n      include: [/\\.vue$/, /\\.md$/],\n    }),\n    Pages({\n      extensions: ['vue', 'md'],\n    }),\n    Markdown()\n  ],\n}\n```\n\nPut your markdown under `./src/pages/xx.md`, then you can access the page via route `/xx`.\n\n### Work with [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)\n\n`unplugin-vue-components` allows you to do on-demand components auto-importing without worrying about registration.\n\n```ts\nimport Vue from '@vitejs/plugin-vue'\nimport Components from 'unplugin-vue-components/vite'\nimport Markdown from 'unplugin-vue-markdown/vite'\n\nexport default {\n  plugins: [\n    Vue({\n      include: [/\\.vue$/, /\\.md$/],\n    }),\n    Markdown(),\n    // should be placed after `Markdown()`\n    Components({\n      // allow auto load markdown components under `./src/components/`\n      extensions: ['vue', 'md'],\n\n      // allow auto import and register components used in markdown\n      include: [/\\.vue$/, /\\.vue\\?vue/, /\\.md$/],\n    })\n  ],\n}\n```\n\nComponents under `./src/components` can be directly used in markdown components, and markdown components can also be put under `./src/components` to be auto imported.\n\n## TypeScript Shim\n\n```ts\ndeclare module '*.vue' {\n  import type { ComponentOptions } from 'vue'\n\n  const Component: ComponentOptions\n  export default Component\n}\n\ndeclare module '*.md' {\n  import type { ComponentOptions } from 'vue'\n\n  const Component: ComponentOptions\n  export default Component\n}\n```\n\n## License\n\nMIT License © 2020-PRESENT [Anthony Fu](https://github.com/antfu)\n","funding_links":["https://opencollective.com/antfu","https://github.com/sponsors/antfu"],"categories":["Pre-packed","TypeScript"],"sub_categories":["Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-vue-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funplugin%2Funplugin-vue-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-vue-markdown/lists"}