{"id":14982147,"url":"https://github.com/koca/vue-mdx-bundler","last_synced_at":"2025-12-16T09:19:53.936Z","repository":{"id":52354838,"uuid":"351547765","full_name":"koca/vue-mdx-bundler","owner":"koca","description":"Compile and bundle your MDX files and their dependencies. FAST. (esbuild + xdm)","archived":false,"fork":false,"pushed_at":"2021-08-19T15:05:02.000Z","size":709,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-24T08:42:38.390Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/koca.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}},"created_at":"2021-03-25T19:09:31.000Z","updated_at":"2023-04-04T19:46:22.000Z","dependencies_parsed_at":"2022-09-07T18:00:50.077Z","dependency_job_id":null,"html_url":"https://github.com/koca/vue-mdx-bundler","commit_stats":null,"previous_names":["koca/vue-mdx"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/koca/vue-mdx-bundler","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-mdx-bundler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-mdx-bundler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-mdx-bundler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-mdx-bundler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koca","download_url":"https://codeload.github.com/koca/vue-mdx-bundler/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koca%2Fvue-mdx-bundler/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27761848,"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","status":"online","status_checked_at":"2025-12-16T02:00:10.477Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-09-24T14:04:52.433Z","updated_at":"2025-12-16T09:19:53.899Z","avatar_url":"https://github.com/koca.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003evue-mdx-bundler\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"40\" fill=\"none\" viewBox=\"0 0 32 30\" style=\"margin-left: 15px;vertical-align:top\"\u003e\n  \u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M1.254 0L2.56 3.646H0v3.417h3.784l1.514 4.228H0v3.418h6.523l1.514 4.228H0v3.417h9.261l1.515 4.228H0V30h12l-1.224-3.418h9.5L19 30h12.442v-3.418H20.276l1.578-4.228h9.59v-3.417h-8.315l1.578-4.228h6.736V11.29h-5.461l1.577-4.228h3.884V3.646h-2.608L30.194 0H1.254zm27.58 3.646l-1.276 3.417H3.784L2.56 3.646h26.274zM25.98 11.29l-1.275 3.418H6.523L5.298 11.29h20.683zm-2.853 7.646l-1.275 3.417H9.26l-1.224-3.417h15.091z\" clip-rule=\"evenodd\"/\u003e\n\u003c/svg\u003e\n\u003c/h1\u003e\n\n\u003cp\u003eCompile and bundle your MDX files and their dependencies. FAST.\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![downloads][downloads-badge]][npmtrends]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-badge]][prs]\n[![Code of Conduct][coc-badge]][coc]\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003e *WIP* we'll update this readme\n\u003e \n\u003e this is a fork of react version of [mdx-bundler](https://github.com/kentcdodds/mdx-bundler) by [kentcdodds.com](https://kentcdodds.com) thanks Kent 🙏\n## The problem\n\nYou have a string of MDX and various TS/JS files that it uses and you want to\nget a bundled version of these files to eval in the browser.\n\n## This solution\n\nThis is an async function that will compile and bundle your MDX files and their\ndependencies. It uses [esbuild](https://esbuild.github.io/), so it's VERY fast\nand supports TypeScript files (for the dependencies of your MDX files). It also\nuses [xdm](https://github.com/wooorm/xdm) which is a more modern and powerful\nMDX compiler with fewer bugs and more features (and no extra runtime\nrequirements).\n\nYour source files could be local, in a remote github repo, in a CMS, or wherever\nelse and it doesn't matter. All `mdx-bundler` cares about is that you pass it\nall the files and source code necessary and it will take care of bundling\neverything for you.\n\n### FAQ:\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"What's so cool about MDX?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\n[MDX](https://mdxjs.com/) enables you to combine terse markdown syntax for your\ncontent with the power of React components. For content-heavy sites, writing the\ncontent with straight-up HTML can be annoyingly verbose. Often people solve this\nusing a WSYWIG editor, but too often those fall short in mapping the writer's\nintent to HTML. Many people prefer using markdown to express their content\nsource and have that parsed into HTML to be rendered.\n\nThe problem with using Markdown for your content is if you want to have some\ninteractivity embedded into your content, you're pretty limited. You either need\nto insert an element that JavaScript targets (which is annoyingly indirect), or\nyou can use an `iframe` or something.\n\nAs previously stated, [MDX](https://mdxjs.com/) enables you to combine terse\nmarkdown syntax for your content with the power of React components. So you can\nimport a React component and render it within the markdown itself. It's the best\nof both worlds.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"How is this different from \u003ca href=\"https://github.com/hashicorp/next-mdx-remote\"\u003e\u003ccode\u003enext-mdx-remote\u003c/code\u003e\u003c/a\u003e?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\n`mdx-bundler` actually bundles dependencies of your MDX files. For example, this\nwon't work with `next-mdx-remote`, but it will with `mdx-bundler`:\n\n```md\n---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n# Wahoo\n\nimport Demo from './demo'\n\nHere's a **neat** demo:\n\n\u003cDemo /\u003e\n```\n\n`next-mdx-remote` chokes on that import because it's not a bundler, it's just a\ncompiler. `mdx-bundler` is an MDX compiler and bundler. That's the difference.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"How is this different from the mdx plugins for webpack or rollup?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nThose tools are intended to be run \"at build time\" and then you deploy the built\nversion of your files. This means if you have some content in MDX and want to\nmake a typo change, you have to rebuild and redeploy the whole site. This also\nmeans that every MDX page you add to your site will increase your build-times,\nso it doesn't scale all that well.\n\n`mdx-bundler` can definitely be used at build-time, but it's more powerfully\nused as a runtime bundler. A common use case is to have a route for your MDX\ncontent and when that request comes in, you load the MDX content and hand that\noff to `mdx-bundler` for bundling. This means that `mdx-bundler` is infinitely\nscalable. Your build won't be any longer regardless of how much MDX content you\nhave. Also, `mdx-bundler` is quite fast, but to make this on-demand bundling\neven faster, you can use appropriate cache headers to avoid unnecessary\nre-bundling.\n\nWebpack/rollup/etc also require that all your MDX files are on the local\nfilesystem to work. If you want to store your MDX content in a separate repo or\nCMS, you're kinda out of luck or have to do some build-time gymnastics to get\nthe files in place for the build.\n\nWith `mdx-bundler`, it doesn't matter where your MDX content comes from, you can\nbundle files from anywhere, you're just responsible for getting the content into\nmemory and then you hand that off to `mdx-bundler` for bundling.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"Does this work with Nuxt/Vite/Gridsome/VueCLI/etc?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nTotally. It works with any of those tools. Depending on whether your\nmeta-framework supports server-side rendering, you'll implement it differently.\nYou might decide to go with a built-time approach (for Vite/Gridsome/VueCLI), but as\nmentioned, the true power of `mdx-bundler` comes in the form of on-demand\nbundling. So it's best suited for SSR frameworks like Nuxt/Vite.\n\n\u003c/details\u003e\n\n\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cstrong\u003e\n      \"Why does this use XDM instead of @mdx-js?\"\n    \u003c/strong\u003e\n  \u003c/summary\u003e\n\nIt has more features, fewer bugs, and no runtime!\n\n\u003c/details\u003e\n\n\n## Docs\n\n- [vue-mdx-bundler docs](https://github.com/koca/vue-mdx/blob/main/packages/vue-mdx-bundler/README.md)\n\n## Plugins\n\n- [vite-plugin-mdx-vue docs](https://github.com/koca/vue-mdx/blob/main/packages/vite-plugin-mdx-vue/README.md)\n\n\n## Issues\n\n_Looking to contribute? Look for the [Good First Issue][good-first-issue]\nlabel._\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**][bugs]\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding\na 👍. This helps maintainers prioritize what to work on.\n\n[**See Feature Requests**][requests]\n\n\n\n## LICENSE\n\nMIT\n\n\u003c!-- prettier-ignore-start --\u003e\n[npm]: https://www.npmjs.com\n[node]: https://nodejs.org\n[build-badge]: https://img.shields.io/github/workflow/status/koca/vue-mdx-bundler/validate?logo=github\u0026style=flat-square\n[build]: https://github.com/koca/vue-mdx-bundler/actions?query=workflow%3Avalidate\n[coverage-badge]: https://img.shields.io/codecov/c/github/koca/vue-mdx-bundler.svg?style=flat-square\n[coverage]: https://codecov.io/github/koca/vue-mdx-bundler\n[version-badge]: https://img.shields.io/npm/v/vue-mdx-bundler.svg?style=flat-square\n[package]: https://www.npmjs.com/package/vue-mdx-bundler\n[downloads-badge]: https://img.shields.io/npm/dm/vue-mdx-bundler.svg?style=flat-square\n[npmtrends]: https://www.npmtrends.com/vue-mdx-bundler\n[license-badge]: https://img.shields.io/npm/l/vue-mdx-bundler.svg?style=flat-square\n[license]: https://github.com/koca/vue-mdx-bundler/blob/main/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: https://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/koca/vue-mdx-bundler/blob/main/CODE_OF_CONDUCT.md\n[emojis]: https://github.com/all-contributors/all-contributors#emoji-key\n[all-contributors]: https://github.com/all-contributors/all-contributors\n[all-contributors-badge]: https://img.shields.io/github/all-contributors/koca/vue-mdx-bundler?color=orange\u0026style=flat-square\n[bugs]: https://github.com/koca/vue-mdx-bundler/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Acreated-desc+label%3Abug\n[requests]: https://github.com/koca/vue-mdx-bundler/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement\n[good-first-issue]: https://github.com/koca/vue-mdx-bundler/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3Aenhancement+label%3A%22good+first+issue%22\n\u003c!-- prettier-ignore-end --\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoca%2Fvue-mdx-bundler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoca%2Fvue-mdx-bundler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoca%2Fvue-mdx-bundler/lists"}