[{"data":1,"prerenderedAt":546},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-ssr-and-mounting":159,"-getting-started-ssr-and-mounting-surround":541},[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":21,"body":161,"description":535,"extension":536,"links":537,"meta":538,"navigation":336,"path":22,"seo":539,"stem":23,"__hash__":540},"docs\u002F1.getting-started\u002F3.ssr-and-mounting.md",{"type":162,"value":163,"toc":529},"minimark",[164,168,173,200,204,210,404,408,422,426,430,433,522,525],[165,166,167],"p",{},"Phaser is a browser runtime. The library keeps that boundary explicit by importing Phaser only on mount and by treating the canvas as a client-side concern.",[169,170,172],"h2",{"id":171},"what-the-core-package-guarantees","What the core package guarantees",[174,175,176,183,194,197],"ul",{},[177,178,179,182],"li",{},[180,181,38],"code",{}," does not bootstrap Phaser during server render.",[177,184,185,186,189,190,193],{},"The actual ",[180,187,188],{},"phaser"," import happens inside ",[180,191,192],{},"onMounted",".",[177,195,196],{},"The placeholder slot renders before the game exists.",[177,198,199],{},"Unmounting destroys the game instance and clears scene registrations.",[169,201,203],{"id":202},"vue-apps-with-ssr","Vue apps with SSR",[165,205,206,207,209],{},"Use ",[180,208,38],{}," inside a client-only branch when your Vue app renders on the server.",[211,212,218],"pre",{"className":213,"code":214,"filename":215,"language":216,"meta":217,"style":217},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CClientOnly>\n    \u003CPhaserGame :width=\"800\" :height=\"480\">\n      \u003CPhaserScene scene-key=\"main\" :definition=\"scene\" \u002F>\n    \u003C\u002FPhaserGame>\n\n    \u003Ctemplate #fallback>\n      \u003Cdiv class=\"canvas-skeleton\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FClientOnly>\n\u003C\u002Ftemplate>\n","src\u002FApp.vue","vue","",[180,219,220,236,247,285,321,331,338,353,375,384,394],{"__ignoreMap":217},[221,222,225,229,233],"span",{"class":223,"line":224},"line",1,[221,226,228],{"class":227},"sMK4o","\u003C",[221,230,232],{"class":231},"swJcz","template",[221,234,235],{"class":227},">\n",[221,237,239,242,245],{"class":223,"line":238},2,[221,240,241],{"class":227},"  \u003C",[221,243,244],{"class":231},"ClientOnly",[221,246,235],{"class":227},[221,248,250,253,255,259,262,265,269,271,274,276,278,281,283],{"class":223,"line":249},3,[221,251,252],{"class":227},"    \u003C",[221,254,38],{"class":231},[221,256,258],{"class":257},"spNyl"," :width",[221,260,261],{"class":227},"=",[221,263,264],{"class":227},"\"",[221,266,268],{"class":267},"sfazB","800",[221,270,264],{"class":227},[221,272,273],{"class":257}," :height",[221,275,261],{"class":227},[221,277,264],{"class":227},[221,279,280],{"class":267},"480",[221,282,264],{"class":227},[221,284,235],{"class":227},[221,286,288,291,294,297,299,301,304,306,309,311,313,316,318],{"class":223,"line":287},4,[221,289,290],{"class":227},"      \u003C",[221,292,293],{"class":231},"PhaserScene",[221,295,296],{"class":257}," scene-key",[221,298,261],{"class":227},[221,300,264],{"class":227},[221,302,303],{"class":267},"main",[221,305,264],{"class":227},[221,307,308],{"class":257}," :definition",[221,310,261],{"class":227},[221,312,264],{"class":227},[221,314,315],{"class":267},"scene",[221,317,264],{"class":227},[221,319,320],{"class":227}," \u002F>\n",[221,322,324,327,329],{"class":223,"line":323},5,[221,325,326],{"class":227},"    \u003C\u002F",[221,328,38],{"class":231},[221,330,235],{"class":227},[221,332,334],{"class":223,"line":333},6,[221,335,337],{"emptyLinePlaceholder":336},true,"\n",[221,339,341,343,345,348,351],{"class":223,"line":340},7,[221,342,252],{"class":227},[221,344,232],{"class":231},[221,346,347],{"class":227}," #",[221,349,350],{"class":257},"fallback",[221,352,235],{"class":227},[221,354,356,358,361,364,366,368,371,373],{"class":223,"line":355},8,[221,357,290],{"class":227},[221,359,360],{"class":231},"div",[221,362,363],{"class":257}," class",[221,365,261],{"class":227},[221,367,264],{"class":227},[221,369,370],{"class":267},"canvas-skeleton",[221,372,264],{"class":227},[221,374,320],{"class":227},[221,376,378,380,382],{"class":223,"line":377},9,[221,379,326],{"class":227},[221,381,232],{"class":231},[221,383,235],{"class":227},[221,385,387,390,392],{"class":223,"line":386},10,[221,388,389],{"class":227},"  \u003C\u002F",[221,391,244],{"class":231},[221,393,235],{"class":227},[221,395,397,400,402],{"class":223,"line":396},11,[221,398,399],{"class":227},"\u003C\u002F",[221,401,232],{"class":231},[221,403,235],{"class":227},[169,405,407],{"id":406},"nuxt-apps","Nuxt apps",[165,409,410,411,414,415,418,419,421],{},"The Nuxt module keeps ",[180,412,413],{},"clientOnly: true"," by default. ",[180,416,417],{},"NuxtPhaserGame"," wraps the shared host in ",[180,420,244],{}," and forwards the placeholder slot.",[423,424,425],"warning",{},"Do not try to render the Phaser canvas on the server. The supported SSR story is DOM layout, surrounding UI, route rendering, and safe client bootstrapping.",[169,427,429],{"id":428},"mount-timing","Mount timing",[165,431,432],{},"Use the host placeholder when you want a stable layout before the canvas appears.",[211,434,437],{"className":213,"code":435,"filename":436,"language":216,"meta":217,"style":217},"\u003CNuxtPhaserGame instance-id=\"demo\" :width=\"840\" :height=\"420\">\n  \u003Ctemplate #placeholder>\n    \u003Cdiv class=\"min-h-[420px] rounded-xl border border-dashed border-default\" \u002F>\n  \u003C\u002Ftemplate>\n\n  \u003CPhaserScene scene-key=\"demo\" :definition=\"scene\" \u002F>\n\u003C\u002FNuxtPhaserGame>\n","app\u002Fpages\u002Findex.vue",[180,438,439,489,495,500,505,509,514],{"__ignoreMap":217},[221,440,441,443,445,448,450,452,455,457,460,463,465,467,471,473,475,478,480,482,485,487],{"class":223,"line":224},[221,442,228],{"class":227},[221,444,417],{"class":231},[221,446,447],{"class":257}," instance-id",[221,449,261],{"class":227},[221,451,264],{"class":227},[221,453,454],{"class":267},"demo",[221,456,264],{"class":227},[221,458,459],{"class":227}," :",[221,461,462],{"class":257},"width",[221,464,261],{"class":227},[221,466,264],{"class":227},[221,468,470],{"class":469},"sbssI","840",[221,472,264],{"class":227},[221,474,459],{"class":227},[221,476,477],{"class":257},"height",[221,479,261],{"class":227},[221,481,264],{"class":227},[221,483,484],{"class":469},"420",[221,486,264],{"class":227},[221,488,235],{"class":227},[221,490,491],{"class":223,"line":238},[221,492,494],{"class":493},"sTEyZ","  \u003Ctemplate #placeholder>\n",[221,496,497],{"class":223,"line":249},[221,498,499],{"class":493},"    \u003Cdiv class=\"min-h-[420px] rounded-xl border border-dashed border-default\" \u002F>\n",[221,501,502],{"class":223,"line":287},[221,503,504],{"class":493},"  \u003C\u002Ftemplate>\n",[221,506,507],{"class":223,"line":323},[221,508,337],{"emptyLinePlaceholder":336},[221,510,511],{"class":223,"line":333},[221,512,513],{"class":493},"  \u003CPhaserScene scene-key=\"demo\" :definition=\"scene\" \u002F>\n",[221,515,516,518,520],{"class":223,"line":340},[221,517,399],{"class":227},[221,519,417],{"class":231},[221,521,235],{"class":227},[165,523,524],{},"That pattern prevents layout shift while keeping the Phaser runtime out of the server render.",[526,527,528],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":217,"searchDepth":238,"depth":238,"links":530},[531,532,533,534],{"id":171,"depth":238,"text":172},{"id":202,"depth":238,"text":203},{"id":406,"depth":238,"text":407},{"id":428,"depth":238,"text":429},"Keep Phaser client-only, avoid hydration footguns, and choose the right host component in Vue and Nuxt.","md",null,{},{"title":21,"description":535},"z4akCHKpBBqCxoy5Z08OTxEHHas2t_JaxBJVowxVZl8",[542,544],{"title":17,"path":18,"stem":19,"description":543,"children":-1},"Mount PhaserGame, register a scene, and connect Vue UI to the canvas through the typed bridge.",{"title":25,"path":26,"stem":27,"description":545,"icon":28,"children":-1},"Install the Phaser best practices skill to give AI agents direct guidance for Phaser 3 architecture, scenes, physics, assets, and performance work.",1777965860140]