Embedded Examples

StackBlitz

Iframe

@stackblitz/sdk

embedProjectId に crossOriginIsolated: true を渡すと、URL への corp=1 付与と allow="cross-origin-isolated" の委譲を SDK がやってくれます。theme は VitePress のダークモードに追従します。

<StackBlitzEmbed project-id="vitejs-vite-g9mvnye1" open-file="src/App.tsx" />

prop	既定値	説明
project-id	必須	stackblitz.com/edit/<projectId> の projectId
open-file	なし	最初に開くファイル。カンマ区切りで複数可
view	preview	editor / preview / default（両方）
height	500	iframe の高さ
click-to-load	true	「Run project」を押すまで WebContainer を起動しない
hide-navigation	false	プレビュー上部の URL バーを隠す
hide-explorer	false	左のアクティビティバーを隠す
terminal-height	なし	ターミナルの高さ（%）
start-script	なし	起動時に実行する npm script。未指定なら dev または start

Vue SFC Playground

Iframe

COOP/COEP の設定により表示できません

StackBlitz 埋め込みのために親ページに Cross-Origin-Embedder-Policy を付けているため、CORP/COEP を返さない play.vuejs.org の iframe はブラウザにブロックされ、空白になります。ページ内で動かす場合は下の @vue/repl を使ってください。

@vue/repl（単一ファイル・Monaco エディタ）

examples/Counter.vue を ?raw で文字列として読み込み、App.vue として渡しています。editor="monaco" で補完・型推論付きの Monaco エディタになります。

@vue/repl（複数ファイル・CodeMirror エディタ）

files に複数のファイルを渡すとタブで切り替えられます。App.vue がエントリーポイントになります。エディタは既定の CodeMirror です。

@vue/repl の使い方

<script setup>
import counterCode from './examples/Counter.vue?raw'
</script>

<VuePlayground :files="{ 'App.vue': counterCode }" />

prop	既定値	説明
files	必須	ファイル名 → コード。App.vue が必須
editor	codemirror	codemirror / monaco。Monaco はエディタのモデルがページ全体で共有されるため 1 ページに 1 つまで
layout	vertical	horizontal / vertical
layout-reverse	false	プレビューを先に配置
show-output	true	モバイル幅で最初にプレビューを表示
height	560px	全体の高さ
vue-version	なし	サンドボックスで使う Vue のバージョン
show-compile-output	false	JS / CSS のコンパイル結果タブを表示