{"id":32956175,"url":"https://github.com/f3ve/vue-markdown-it","last_synced_at":"2026-01-18T14:30:19.855Z","repository":{"id":194633474,"uuid":"686144977","full_name":"f3ve/vue-markdown-it","owner":"f3ve","description":"Vue 3 plugin and component for markdown-it","archived":false,"fork":false,"pushed_at":"2024-10-26T19:12:36.000Z","size":220,"stargazers_count":36,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-22T20:12:26.369Z","etag":null,"topics":["component","markdown","markdown-it","vue","vue3"],"latest_commit_sha":null,"homepage":"https://freedomevenden.com/projects/vue-markdown-it","language":"Vue","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/f3ve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2023-09-01T21:28:20.000Z","updated_at":"2025-11-17T18:18:06.000Z","dependencies_parsed_at":"2024-01-02T23:30:19.449Z","dependency_job_id":"7c466d0d-c1d0-4061-881c-e8c2d1e49b50","html_url":"https://github.com/f3ve/vue-markdown-it","commit_stats":null,"previous_names":["f3ve/vue-markdown-it"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/f3ve/vue-markdown-it","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f3ve%2Fvue-markdown-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f3ve%2Fvue-markdown-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f3ve%2Fvue-markdown-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f3ve%2Fvue-markdown-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f3ve","download_url":"https://codeload.github.com/f3ve/vue-markdown-it/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f3ve%2Fvue-markdown-it/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28537612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T13:04:05.990Z","status":"ssl_error","status_checked_at":"2026-01-18T13:01:44.092Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":["component","markdown","markdown-it","vue","vue3"],"created_at":"2025-11-12T23:00:19.021Z","updated_at":"2026-01-18T14:30:19.823Z","avatar_url":"https://github.com/f3ve.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003c!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --\u003e\n\n\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n\u003c!--\n*** Thanks for checking out the Best-README-Template. If you have a suggestion\n*** that would make this better, please fork the repo and create a pull request\n*** or simply open an issue with the tag \"enhancement\".\n*** Don't forget to give the project a star!\n*** Thanks again! Now go create something AMAZING! :D\n--\u003e\n\n\u003c!-- PROJECT SHIELDS --\u003e\n\u003c!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https://www.markdownguide.org/basic-syntax/#reference-style-links\n--\u003e\n\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n\n\u003c!-- [![LinkedIn][linkedin-shield]][linkedin-url] --\u003e\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003ch1 align=\"center\"\u003eVue markdown-it\u003c/h1\u003e\n\n  \u003cp align=\"center\"\u003e\n    Vue 3 markdown-it component\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/f3ve/vue-markdown-it\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://github.com/f3ve/vue-markdown-it/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/f3ve/vue-markdown-it/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\nThis is a component for easily integrating [markdown-it](https://github.com/markdown-it/markdown-it) in [Vue 3](https://vuejs.org/). This project was inspired by [markdown-it-vue](https://github.com/ravenq/markdown-it-vue). which hasn't been updated in a while and only supports Vue 2.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Built With\n\n- [![Vue][Vue.js]][Vue-url]\n- [![Vite][Vite.js]][Vite-url]\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\n### Prerequisites\n\n- Vue 3\n\n```bash\nnpm i vue\n```\n\n### Installation\n\n```\nnpm i @f3ve/vue-markdown-it\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Usage\n\n### Importing the Component\n\nYou can directly import the component in your SFC file.\n\n#### In [`\u003cscript setup\u003e`](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) Syntax\n\n```vue\n\u003c!-- Vue 3 setup script syntax --\u003e\n\u003cscript setup\u003e\nimport { VueMarkdownIt } from '@f3ve/vue-markdown-it';\n\nconst post = ref();\n\nonMounted(async () =\u003e {\n  const res = await api.get('/post');\n  post.value = res.data;\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-markdown-it :source=\"post\" /\u003e\n\u003c/template\u003e\n```\n\n#### In Regular `\u003cscript\u003e` Syntax\n\n```vue\n\u003cscript\u003e\nimport { VueMarkdownIt } from '@f3ve/vue-markdown-it';\n\nexport default {\n  components: {\n    VueMarkdownIt\n  }\n  setup() {\n    const post = ref();\n\n    onMounted(async () =\u003e {\n      const res = await api.get('/post');\n      post.value = res.data;\n    });\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-markdown-it :source=\"post\" /\u003e\n\u003c/template\u003e\n```\n\n### Using the Plugin\n\nYou can also use the plugin to register the component globally.\n\n```js\n// main.js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport { VueMarkdownItPlugin } from '@f3ve/vue-markdown-it';\n\nconst app = createApp(App);\n\napp.use(VueMarkdownItPlugin);\n\napp.mount('#app');\n```\n\n### Using markdown-it Plugins\n\nYou can add markdown-it plugins using the `plugin` prop. `plugin` expects an array of markdown-it plugins. If you want to configure the options of a plugin you can nest the plugin and its options in an array.\n\n```vue\n\u003cscript setup\u003e\nimport { VueMarkdownIt } from '@f3ve/vue-markdown-it';\nimport myPlugin from 'myPlugin';\nimport myPluginWithOption from 'myPluginWithOptions';\n\nconst post = ref();\n\nonMounted(async () =\u003e {\n  const res = await api.get('/post');\n  post.value = res.data;\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-markdown-it\n    :source=\"post\"\n    :plugins=\"[myPlugin, [myPluginWithOptions, { option1: true }]]\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Using Markdown-it Options \u0026 Presets\n\nSee [Markdown-it docs](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) for more information\n\n#### Options\n\n\u003e _Note: I'm using Vue [script setup](https://vuejs.org/api/sfc-script-setup.html#basic-syntax) syntax in these examples. If you're not using script setup make sure to [register the component](https://vuejs.org/guide/components/registration.html#local-registration) before using._\n\n```vue\n\u003cscript setup\u003e\nimport { VueMarkdownIt } from '@f3ve/vue-markdown-it';\n\nconst post = ref();\nconst options = {\n  html: true,\n  linkify: true,\n};\n\nonMounted(async () =\u003e {\n  const res = await api.get('/post');\n  post.value = res.data;\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-markdown-it :source=\"post\" :options=\"options\" /\u003e\n\u003c/template\u003e\n```\n\n#### Presets\n\n```vue\n\u003cscript setup\u003e\nimport { VueMarkdownIt } from '@f3ve/vue-markdown-it';\n\nconst post = ref();\n\nonMounted(async () =\u003e {\n  const res = await api.get('/post');\n  post.value = res.data;\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-markdown-it :source=\"post\" preset=\"commonmark\" /\u003e\n\u003c/template\u003e\n```\n\n#### Using Presets and Options together\n\n```vue\n\u003cscript setup\u003e\nimport { VueMarkdownIt } from '@f3ve/vue-markdown-it';\n\nconst post = ref();\nconst options = {\n  html: true,\n  linkify: true,\n};\n\nonMounted(async () =\u003e {\n  const res = await api.get('/post');\n  post.value = res.data;\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cvue-markdown-it :source=\"post\" :options=\"options\" preset=\"commonmark\" /\u003e\n\u003c/template\u003e\n```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\u003c!-- ROADMAP --\u003e\n\n## Roadmap\n\nSee the [open issues](https://github.com/f3ve/vue-markdown-it/issues) for a full list of proposed features (and known issues).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\n[See contributing guide](https://github.com/f3ve/.github/blob/main/CONTRIBUTING.md)\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the [MIT License](https://github.com/f3ve/vue-markdown-it/blob/main/LICENSE).\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/f3ve/vue-markdown-it.svg?style=for-the-badge\n[contributors-url]: https://github.com/f3ve/vue-markdown-it/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/f3ve/vue-markdown-it.svg?style=for-the-badge\n[forks-url]: https://github.com/f3ve/vue-markdown-it/network/members\n[stars-shield]: https://img.shields.io/github/stars/f3ve/vue-markdown-it.svg?style=for-the-badge\n[stars-url]: https://github.com/f3ve/vue-markdown-it/stargazers\n[issues-shield]: https://img.shields.io/github/issues/f3ve/vue-markdown-it.svg?style=for-the-badge\n[issues-url]: https://github.com/f3ve/vue-markdown-it/issues\n[license-shield]: https://img.shields.io/github/license/f3ve/vue-markdown-it.svg?style=for-the-badge\n[license-url]: https://github.com/f3ve/vue-markdown-it/blob/master/LICENSE.txt\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/linkedin_username\n[product-screenshot]: images/screenshot.png\n[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white\n[Next-url]: https://nextjs.org/\n[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\n[React-url]: https://reactjs.org/\n[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge\u0026logo=vuedotjs\u0026logoColor=4FC08D\n[Vue-url]: https://vuejs.org/\n[Vite.js]: https://img.shields.io/badge/VITE-35495E?style=for-the-badge\u0026logo=vite\n[Vite-url]: https://vitejs.dev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff3ve%2Fvue-markdown-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff3ve%2Fvue-markdown-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff3ve%2Fvue-markdown-it/lists"}