Killing the Vue Playground iframe in My Astro Blog

TLDR I built a vue live MDX code block that compiles a Vue SFC at build time and mounts it as an Astro island next to its Shiki-highlighted source. No iframe, no Monaco bundle, no play.vuejs.org dependency. Multiple blocks sharing an id get bundled into a tabbed multi-file demo. The whole setup is one remark plugin, one Vite plugin, one Astro component, and one Vue island — about 350 lines total, with grouping and bundling logic factored into a single shared module. The problem with the Vue Playground iframe For two years every Vue demo on this blog looked like this: Behind the component was an iframe pointing at play.vuejs.org with the SFC source hidden in a base64 hash. It worked. It also drove me crazy: The source lived in a URL hash. I couldn’t grep for it. I couldn’t refactor it. Git diffs were base64 noise. AI assistants couldn’t read it from the MDX file. Editing was a tab-switching ritual. Open play.vuejs.org, edit, copy URL, paste back. A one-character fix took thirty…