[{"data":1,"prerenderedAt":634},["ShallowReactive",2],{"navigation_docs":3,"-vue-guide-composables-and-bridge":159,"-vue-guide-composables-and-bridge-surround":629},[4,29,57,76,100,124,152],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,12,16,20,24],{"title":5,"path":7,"stem":11},"1.getting-started\u002Findex",{"title":13,"path":14,"stem":15},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F1.installation",{"title":17,"path":18,"stem":19},"First Game","\u002Fgetting-started\u002Ffirst-game","1.getting-started\u002F2.first-game",{"title":21,"path":22,"stem":23},"SSR and Mounting","\u002Fgetting-started\u002Fssr-and-mounting","1.getting-started\u002F3.ssr-and-mounting",{"title":25,"path":26,"stem":27,"icon":28},"Skills","\u002Fgetting-started\u002Fskills","1.getting-started\u002F4.skills","i-lucide-sparkles",{"title":30,"icon":31,"path":32,"stem":33,"children":34},"Vue Guide","i-lucide-book-open","\u002Fvue-guide","2.vue-guide",[35,37,41,45,49,53],{"title":30,"path":32,"stem":36},"2.vue-guide\u002Findex",{"title":38,"path":39,"stem":40},"PhaserGame","\u002Fvue-guide\u002Fphaser-game","2.vue-guide\u002F1.phaser-game",{"title":42,"path":43,"stem":44},"Scenes","\u002Fvue-guide\u002Fscenes","2.vue-guide\u002F2.scenes",{"title":46,"path":47,"stem":48},"Primitives","\u002Fvue-guide\u002Fprimitives","2.vue-guide\u002F3.primitives",{"title":50,"path":51,"stem":52},"Composables and Bridge","\u002Fvue-guide\u002Fcomposables-and-bridge","2.vue-guide\u002F4.composables-and-bridge",{"title":54,"path":55,"stem":56},"Escape Hatches","\u002Fvue-guide\u002Fescape-hatches","2.vue-guide\u002F5.escape-hatches",{"title":58,"icon":59,"path":60,"stem":61,"children":62},"Nuxt Module","i-lucide-layers-3","\u002Fnuxt-module","3.nuxt-module",[63,65,68,72],{"title":58,"path":60,"stem":64},"3.nuxt-module\u002Findex",{"title":13,"path":66,"stem":67},"\u002Fnuxt-module\u002Finstallation","3.nuxt-module\u002F1.installation",{"title":69,"path":70,"stem":71},"Runtime Defaults","\u002Fnuxt-module\u002Fruntime-defaults","3.nuxt-module\u002F2.runtime-defaults",{"title":73,"path":74,"stem":75},"Client-only Wrapper","\u002Fnuxt-module\u002Fclient-only-wrapper","3.nuxt-module\u002F3.client-only-wrapper",{"title":77,"icon":78,"path":79,"stem":80,"children":81},"Examples","i-lucide-play-square","\u002Fexamples","4.examples",[82,84,88,92,96],{"title":77,"path":79,"stem":83},"4.examples\u002Findex",{"title":85,"path":86,"stem":87},"Minimal","\u002Fexamples\u002Fminimal","4.examples\u002F1.minimal",{"title":89,"path":90,"stem":91},"Imperative Escape Hatch","\u002Fexamples\u002Fimperative-escape-hatch","4.examples\u002F2.imperative-escape-hatch",{"title":93,"path":94,"stem":95},"Multi-scene","\u002Fexamples\u002Fmulti-scene","4.examples\u002F3.multi-scene",{"title":97,"path":98,"stem":99},"Nuxt Playground","\u002Fexamples\u002Fnuxt-playground","4.examples\u002F4.nuxt-playground",{"title":101,"icon":102,"path":103,"stem":104,"children":105},"API Reference","i-lucide-book-open-text","\u002Fapi-reference","5.api-reference",[106,108,112,116,120],{"title":101,"path":103,"stem":107},"5.api-reference\u002Findex",{"title":109,"path":110,"stem":111},"Vue Components","\u002Fapi-reference\u002Fvue-components","5.api-reference\u002F1.vue-components",{"title":113,"path":114,"stem":115},"Composables","\u002Fapi-reference\u002Fcomposables","5.api-reference\u002F2.composables",{"title":117,"path":118,"stem":119},"Types","\u002Fapi-reference\u002Ftypes","5.api-reference\u002F3.types",{"title":121,"path":122,"stem":123},"Nuxt Module Options","\u002Fapi-reference\u002Fnuxt-module-options","5.api-reference\u002F4.nuxt-module-options",{"title":125,"icon":126,"path":127,"stem":128,"children":129},"Guides","i-lucide-compass","\u002Fguides","6.guides",[130,132,136,140,144,148],{"title":125,"path":127,"stem":131},"6.guides\u002Findex",{"title":133,"path":134,"stem":135},"Performance","\u002Fguides\u002Fperformance","6.guides\u002F1.performance",{"title":137,"path":138,"stem":139},"Scene-first Design","\u002Fguides\u002Fscene-first-design","6.guides\u002F2.scene-first-design",{"title":141,"path":142,"stem":143},"Vue Reactivity vs Phaser Imperative Updates","\u002Fguides\u002Fvue-reactivity-vs-phaser-imperative-updates","6.guides\u002F3.vue-reactivity-vs-phaser-imperative-updates",{"title":145,"path":146,"stem":147},"Testing scene primitives in Vue","\u002Fguides\u002Ftesting-scene-primitives-in-vue","6.guides\u002F4.testing-scene-primitives-in-vue",{"title":149,"path":150,"stem":151},"Testing a Phaser canvas in Nuxt","\u002Fguides\u002Ftesting-a-phaser-canvas-in-nuxt","6.guides\u002F5.testing-a-phaser-canvas-in-nuxt",{"title":153,"path":154,"stem":155,"children":156,"icon":158},"Roadmap","\u002Froadmap","7.roadmap\u002Findex",[157],{"title":153,"path":154,"stem":155},"i-lucide-flag",{"id":160,"title":50,"body":161,"description":623,"extension":624,"links":625,"meta":626,"navigation":225,"path":51,"seo":627,"stem":52,"__hash__":628},"docs\u002F2.vue-guide\u002F4.composables-and-bridge.md",{"type":162,"value":163,"toc":617},"minimark",[164,168,173,176,360,364,430,441,445,451,570,574,609,613],[165,166,167],"p",{},"The composables expose Phaser state without trying to mirror the engine into deep Vue reactivity. Most values use shallow refs or explicit updates.",[169,170,172],"h2",{"id":171},"bridge-events","Bridge events",[165,174,175],{},"Use a typed bridge when DOM UI needs to send intent into a scene or when scene code needs to fan out low-frequency events.",[177,178,184],"pre",{"className":179,"code":180,"filename":181,"language":182,"meta":183,"style":183},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { usePhaserBridge } from '@onmax\u002Fphaser-vue'\n\ninterface HudBridge {\n  'hud:boost': { amount: number }\n}\n\nconst bridge = usePhaserBridge\u003CHudBridge>('demo')\n\nbridge?.emit('hud:boost', { amount: 1 })\n","src\u002Fbridge.ts","ts","",[185,186,187,220,227,241,270,276,281,318,323],"code",{"__ignoreMap":183},[188,189,192,196,200,204,207,210,213,217],"span",{"class":190,"line":191},"line",1,[188,193,195],{"class":194},"s7zQu","import",[188,197,199],{"class":198},"sMK4o"," {",[188,201,203],{"class":202},"sTEyZ"," usePhaserBridge",[188,205,206],{"class":198}," }",[188,208,209],{"class":194}," from",[188,211,212],{"class":198}," '",[188,214,216],{"class":215},"sfazB","@onmax\u002Fphaser-vue",[188,218,219],{"class":198},"'\n",[188,221,223],{"class":190,"line":222},2,[188,224,226],{"emptyLinePlaceholder":225},true,"\n",[188,228,230,234,238],{"class":190,"line":229},3,[188,231,233],{"class":232},"spNyl","interface",[188,235,237],{"class":236},"sBMFI"," HudBridge",[188,239,240],{"class":198}," {\n",[188,242,244,247,250,253,256,258,262,264,267],{"class":190,"line":243},4,[188,245,246],{"class":198},"  '",[188,248,249],{"class":215},"hud:boost",[188,251,252],{"class":198},"'",[188,254,255],{"class":198},":",[188,257,199],{"class":198},[188,259,261],{"class":260},"swJcz"," amount",[188,263,255],{"class":198},[188,265,266],{"class":236}," number",[188,268,269],{"class":198}," }\n",[188,271,273],{"class":190,"line":272},5,[188,274,275],{"class":198},"}\n",[188,277,279],{"class":190,"line":278},6,[188,280,226],{"emptyLinePlaceholder":225},[188,282,284,287,290,293,296,299,302,305,308,310,313,315],{"class":190,"line":283},7,[188,285,286],{"class":232},"const",[188,288,289],{"class":202}," bridge ",[188,291,292],{"class":198},"=",[188,294,203],{"class":295},"s2Zo4",[188,297,298],{"class":198},"\u003C",[188,300,301],{"class":236},"HudBridge",[188,303,304],{"class":198},">",[188,306,307],{"class":202},"(",[188,309,252],{"class":198},[188,311,312],{"class":215},"demo",[188,314,252],{"class":198},[188,316,317],{"class":202},")\n",[188,319,321],{"class":190,"line":320},8,[188,322,226],{"emptyLinePlaceholder":225},[188,324,326,329,332,335,337,339,341,343,346,348,350,352,356,358],{"class":190,"line":325},9,[188,327,328],{"class":202},"bridge",[188,330,331],{"class":198},"?.",[188,333,334],{"class":295},"emit",[188,336,307],{"class":202},[188,338,252],{"class":198},[188,340,249],{"class":215},[188,342,252],{"class":198},[188,344,345],{"class":198},",",[188,347,199],{"class":198},[188,349,261],{"class":260},[188,351,255],{"class":198},[188,353,355],{"class":354},"sbssI"," 1",[188,357,206],{"class":198},[188,359,317],{"class":202},[169,361,363],{"id":362},"scene-and-game-access","Scene and game access",[177,365,368],{"className":179,"code":366,"filename":367,"language":182,"meta":183,"style":183},"const game = usePhaserGame('demo')\nconst scene = usePhaserScene('main')\nconst activeScene = useActivePhaserScene()\n","src\u002Fcomposables\u002FuseGameHandles.ts",[185,369,370,392,415],{"__ignoreMap":183},[188,371,372,374,377,379,382,384,386,388,390],{"class":190,"line":191},[188,373,286],{"class":232},[188,375,376],{"class":202}," game ",[188,378,292],{"class":198},[188,380,381],{"class":295}," usePhaserGame",[188,383,307],{"class":202},[188,385,252],{"class":198},[188,387,312],{"class":215},[188,389,252],{"class":198},[188,391,317],{"class":202},[188,393,394,396,399,401,404,406,408,411,413],{"class":190,"line":222},[188,395,286],{"class":232},[188,397,398],{"class":202}," scene ",[188,400,292],{"class":198},[188,402,403],{"class":295}," usePhaserScene",[188,405,307],{"class":202},[188,407,252],{"class":198},[188,409,410],{"class":215},"main",[188,412,252],{"class":198},[188,414,317],{"class":202},[188,416,417,419,422,424,427],{"class":190,"line":229},[188,418,286],{"class":232},[188,420,421],{"class":202}," activeScene ",[188,423,292],{"class":198},[188,425,426],{"class":295}," useActivePhaserScene",[188,428,429],{"class":202},"()\n",[165,431,432,433,436,437,440],{},"Use ",[185,434,435],{},"instanceId"," lookups when the DOM control lives outside the game subtree. Use the injected scene scope when the component already sits under ",[185,438,439],{},"PhaserScene",".",[169,442,444],{"id":443},"registry-state","Registry state",[165,446,447,450],{},[185,448,449],{},"usePhaserRegistry()"," subscribes to Phaser registry changes and copies the current registry values into a reactive object for low-frequency UI state.",[177,452,455],{"className":179,"code":453,"filename":454,"language":182,"meta":183,"style":183},"const registry = usePhaserRegistry\u003C{ score: number }>('hud')\n\nwatch(() => registry.state.score, (score) => {\n  console.log('Low-frequency score update:', score)\n})\n","src\u002Fcomposables\u002FuseHud.ts",[185,456,457,493,497,538,563],{"__ignoreMap":183},[188,458,459,461,464,466,469,472,475,477,479,482,484,486,489,491],{"class":190,"line":191},[188,460,286],{"class":232},[188,462,463],{"class":202}," registry ",[188,465,292],{"class":198},[188,467,468],{"class":295}," usePhaserRegistry",[188,470,471],{"class":198},"\u003C{",[188,473,474],{"class":260}," score",[188,476,255],{"class":198},[188,478,266],{"class":236},[188,480,481],{"class":198}," }>",[188,483,307],{"class":202},[188,485,252],{"class":198},[188,487,488],{"class":215},"hud",[188,490,252],{"class":198},[188,492,317],{"class":202},[188,494,495],{"class":190,"line":222},[188,496,226],{"emptyLinePlaceholder":225},[188,498,499,502,504,507,510,513,515,518,520,523,525,528,531,534,536],{"class":190,"line":229},[188,500,501],{"class":295},"watch",[188,503,307],{"class":202},[188,505,506],{"class":198},"()",[188,508,509],{"class":232}," =>",[188,511,512],{"class":202}," registry",[188,514,440],{"class":198},[188,516,517],{"class":202},"state",[188,519,440],{"class":198},[188,521,522],{"class":202},"score",[188,524,345],{"class":198},[188,526,527],{"class":198}," (",[188,529,522],{"class":530},"sHdIc",[188,532,533],{"class":198},")",[188,535,509],{"class":232},[188,537,240],{"class":198},[188,539,540,543,545,548,550,552,555,557,559,561],{"class":190,"line":243},[188,541,542],{"class":202},"  console",[188,544,440],{"class":198},[188,546,547],{"class":295},"log",[188,549,307],{"class":260},[188,551,252],{"class":198},[188,553,554],{"class":215},"Low-frequency score update:",[188,556,252],{"class":198},[188,558,345],{"class":198},[188,560,474],{"class":202},[188,562,317],{"class":260},[188,564,565,568],{"class":190,"line":272},[188,566,567],{"class":198},"}",[188,569,317],{"class":202},[169,571,573],{"id":572},"input-helpers","Input helpers",[575,576,577,587,593,603],"ul",{},[578,579,580,583,584,440],"li",{},[185,581,582],{},"usePhaserPointer()"," tracks the active pointer, world coordinates, and ",[185,585,586],{},"isDown",[578,588,589,592],{},[185,590,591],{},"usePhaserKeyboard()"," creates keyed keyboard bindings from the active scene.",[578,594,595,598,599,602],{},[185,596,597],{},"useGameEvent()"," and ",[185,600,601],{},"useSceneEvent()"," attach directly to Phaser event emitters.",[578,604,605,608],{},[185,606,607],{},"usePhaserAssetUrl()"," resolves asset URLs against the host or plugin defaults.",[610,611,612],"tip",{},"The bridge is for orchestration, not for streaming every frame of gameplay state into Vue. Emit intent and low-frequency state changes instead.",[614,615,616],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":183,"searchDepth":222,"depth":222,"links":618},[619,620,621,622],{"id":171,"depth":222,"text":172},{"id":362,"depth":222,"text":363},{"id":443,"depth":222,"text":444},{"id":572,"depth":222,"text":573},"Reach the current game or scene, subscribe to low-frequency state, and connect DOM UI to Phaser through typed events.","md",null,{},{"title":50,"description":623},"3bbOhEsQ3BqIwVsm5Lt2B6alsgUqa9feh62pO9l_q2I",[630,632],{"title":46,"path":47,"stem":48,"description":631,"children":-1},"Create a small set of Phaser objects declaratively when scene setup is simple and low-frequency.",{"title":54,"path":55,"stem":56,"description":633,"children":-1},"Reach raw game, scene, and object instances whenever the abstraction stops helping.",1777965860782]