Mixing frameworks on one page
This site is built with Astro, and Astro’s islands architecture lets a single static page host components from several frameworks. Both demos below run on this page: Vue 3 first, then React 19, and each hydrates only when its own JavaScript arrives.
Vue component
Section titled “Vue component”这是一个真实的 Vue 组件：构建时预渲染成 HTML，滚动到可见时才水合，所以首屏没有它也能看。
React component
Section titled “React component”这是一个真实的 React 组件，和上面的 Vue 组件跑在同一页里：两边各自带着自己的运行时， 但都只在滚动到可见时才下载自己的 JS。
Why this matters
Section titled “Why this matters”These docs will eventually cover many projects: a CMS, Vue components, React components, IM, a mini program. Picking a separate docs framework per project would mean maintaining several themes, searches and deployments. Whether they can share one site comes down to a single question: can one static page really run examples from more than one framework?
- VitePress only knows Vue; React examples would fall back to screenshots or iframes.
- Docusaurus / Nextra / Fumadocs only know React, with the mirror-image problem.
- Astro + Starlight solves it by keeping
@astrojs/vue,@astrojs/reactand@astrojs/svelteside by side. Each framework ships its own runtime, but only the ones actually used on a page get downloaded.
When not to do this
Section titled “When not to do this”Mixing two frameworks on one page is not free: every extra framework is another runtime download. The site convention is therefore one framework per product page; only this page (and architecture notes) mix them on purpose.