[{"data":1,"prerenderedAt":629},["ShallowReactive",2],{"navigation_docs":3,"-vue-guide-phaser-game":159,"-vue-guide-phaser-game-surround":624},[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":38,"body":161,"description":617,"extension":618,"links":619,"meta":620,"navigation":621,"path":39,"seo":622,"stem":40,"__hash__":623},"docs\u002F2.vue-guide\u002F1.phaser-game.md",{"type":162,"value":163,"toc":612},"minimark",[164,175,339,344,394,398,533,544,548,553,602,608],[165,166,167,170,171,174],"p",{},[168,169,38],"code",{}," is the only component that creates ",[168,172,173],{},"Phaser.Game",". That keeps lifecycle management boring and predictable.",[176,177,183],"pre",{"className":178,"code":179,"filename":180,"language":181,"meta":182,"style":182},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CPhaserGame\n  instance-id=\"demo\"\n  :width=\"800\"\n  :height=\"480\"\n  pixel-art\n  background-color=\"#0f172a\"\n  debug\n  @ready=\"onReady\"\n  @destroyed=\"onDestroyed\"\n>\n  \u003CPhaserScene scene-key=\"main\" :definition=\"scene\" \u002F>\n\u003C\u002FPhaserGame>\n","src\u002FApp.vue","vue","",[168,184,185,198,218,237,254,260,275,281,300,317,323,329],{"__ignoreMap":182},[186,187,190,194],"span",{"class":188,"line":189},"line",1,[186,191,193],{"class":192},"sMK4o","\u003C",[186,195,197],{"class":196},"swJcz","PhaserGame\n",[186,199,201,205,208,211,215],{"class":188,"line":200},2,[186,202,204],{"class":203},"spNyl","  instance-id",[186,206,207],{"class":192},"=",[186,209,210],{"class":192},"\"",[186,212,214],{"class":213},"sfazB","demo",[186,216,217],{"class":192},"\"\n",[186,219,221,224,227,229,231,235],{"class":188,"line":220},3,[186,222,223],{"class":192},"  :",[186,225,226],{"class":203},"width",[186,228,207],{"class":192},[186,230,210],{"class":192},[186,232,234],{"class":233},"sbssI","800",[186,236,217],{"class":192},[186,238,240,242,245,247,249,252],{"class":188,"line":239},4,[186,241,223],{"class":192},[186,243,244],{"class":203},"height",[186,246,207],{"class":192},[186,248,210],{"class":192},[186,250,251],{"class":233},"480",[186,253,217],{"class":192},[186,255,257],{"class":188,"line":256},5,[186,258,259],{"class":203},"  pixel-art\n",[186,261,263,266,268,270,273],{"class":188,"line":262},6,[186,264,265],{"class":203},"  background-color",[186,267,207],{"class":192},[186,269,210],{"class":192},[186,271,272],{"class":213},"#0f172a",[186,274,217],{"class":192},[186,276,278],{"class":188,"line":277},7,[186,279,280],{"class":203},"  debug\n",[186,282,284,287,290,292,294,298],{"class":188,"line":283},8,[186,285,286],{"class":192},"  @",[186,288,289],{"class":203},"ready",[186,291,207],{"class":192},[186,293,210],{"class":192},[186,295,297],{"class":296},"sTEyZ","onReady",[186,299,217],{"class":192},[186,301,303,305,308,310,312,315],{"class":188,"line":302},9,[186,304,286],{"class":192},[186,306,307],{"class":203},"destroyed",[186,309,207],{"class":192},[186,311,210],{"class":192},[186,313,314],{"class":296},"onDestroyed",[186,316,217],{"class":192},[186,318,320],{"class":188,"line":319},10,[186,321,322],{"class":192},">\n",[186,324,326],{"class":188,"line":325},11,[186,327,328],{"class":296},"  \u003CPhaserScene scene-key=\"main\" :definition=\"scene\" \u002F>\n",[186,330,332,335,337],{"class":188,"line":331},12,[186,333,334],{"class":192},"\u003C\u002F",[186,336,38],{"class":196},[186,338,322],{"class":192},[340,341,343],"h2",{"id":342},"responsibilities","Responsibilities",[345,346,347,351,354,365,383],"ul",{},[348,349,350],"li",{},"Mount Phaser into a dedicated container element.",[348,352,353],{},"Merge plugin defaults with host props.",[348,355,356,357,360,361,364],{},"Register managed scenes from ",[168,358,359],{},"PhaserScene"," children and ",[168,362,363],{},"scenes"," props.",[348,366,367,368,371,372,371,375,378,379,382],{},"Expose the ",[168,369,370],{},"game",", ",[168,373,374],{},"mounted",[168,376,377],{},"containerEl",", and ",[168,380,381],{},"bridge"," refs.",[348,384,385,386,389,390,393],{},"Recreate the game when structural config changes and ",[168,387,388],{},"hmrStrategy"," stays on ",[168,391,392],{},"recreate",".",[340,395,397],{"id":396},"important-props","Important props",[399,400,401,414],"table",{},[402,403,404],"thead",{},[405,406,407,411],"tr",{},[408,409,410],"th",{},"Prop",[408,412,413],{},"Meaning",[415,416,417,428,437,448,464,482,492,502,520],"tbody",{},[405,418,419,425],{},[420,421,422],"td",{},[168,423,424],{},"config",[420,426,427],{},"Raw Phaser game config. Use it when the convenience props are not enough.",[405,429,430,434],{},[420,431,432],{},[168,433,363],{},[420,435,436],{},"Additional Phaser scene classes or managed scene definitions.",[405,438,439,445],{},[420,440,441,371,443],{},[168,442,226],{},[168,444,244],{},[420,446,447],{},"Size both the host container and the canvas mount, and flow through to the game config.",[405,449,450,461],{},[420,451,452,371,455,371,458],{},[168,453,454],{},"pixelArt",[168,456,457],{},"transparent",[168,459,460],{},"backgroundColor",[420,462,463],{},"Common rendering defaults.",[405,465,466,471],{},[420,467,468],{},[168,469,470],{},"instanceId",[420,472,473,474,477,478,481],{},"Stable lookup key for ",[168,475,476],{},"usePhaserGame"," and ",[168,479,480],{},"usePhaserBridge"," outside the subtree.",[405,483,484,489],{},[420,485,486],{},[168,487,488],{},"debug",[420,490,491],{},"Enables the runtime warning path.",[405,493,494,499],{},[420,495,496],{},[168,497,498],{},"suspendWhenHidden",[420,500,501],{},"Pauses rendering when the document is hidden.",[405,503,504,508],{},[420,505,506],{},[168,507,388],{},[420,509,510,512,513,516,517,519],{},[168,511,392],{}," or ",[168,514,515],{},"preserve",". Only ",[168,518,392],{}," is implemented in this alpha.",[405,521,522,527],{},[420,523,524],{},[168,525,526],{},"assetsBaseUrl",[420,528,529,530,393],{},"Default base URL used by ",[168,531,532],{},"usePhaserAssetUrl",[534,535,536,537,371,539,371,541,543],"important",{},"Structural changes recreate the game. Treat ",[168,538,424],{},[168,540,226],{},[168,542,244],{},", and other host-level render settings as low-frequency inputs.",[340,545,547],{"id":546},"full-parent-layout","Full-parent layout",[165,549,550,552],{},[168,551,38],{}," can fill any parent that already has a concrete size.",[176,554,556],{"className":178,"code":555,"filename":180,"language":181,"meta":182,"style":182},"\u003Cdiv class=\"game-shell\">\n  \u003CPhaserGame width=\"100%\" height=\"100%\" background-color=\"#0f172a\">\n    \u003CPhaserScene scene-key=\"main\" :definition=\"scene\" \u002F>\n  \u003C\u002FPhaserGame>\n\u003C\u002Fdiv>\n",[168,557,558,579,584,589,594],{"__ignoreMap":182},[186,559,560,562,565,568,570,572,575,577],{"class":188,"line":189},[186,561,193],{"class":192},[186,563,564],{"class":196},"div",[186,566,567],{"class":203}," class",[186,569,207],{"class":192},[186,571,210],{"class":192},[186,573,574],{"class":213},"game-shell",[186,576,210],{"class":192},[186,578,322],{"class":192},[186,580,581],{"class":188,"line":200},[186,582,583],{"class":296},"  \u003CPhaserGame width=\"100%\" height=\"100%\" background-color=\"#0f172a\">\n",[186,585,586],{"class":188,"line":220},[186,587,588],{"class":296},"    \u003CPhaserScene scene-key=\"main\" :definition=\"scene\" \u002F>\n",[186,590,591],{"class":188,"line":239},[186,592,593],{"class":296},"  \u003C\u002FPhaserGame>\n",[186,595,596,598,600],{"class":188,"line":256},[186,597,334],{"class":192},[186,599,564],{"class":196},[186,601,322],{"class":192},[165,603,604,605,607],{},"Use that pattern instead of wrapping ",[168,606,38],{}," in custom deep CSS just to stretch the host.",[609,610,611],"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 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}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);}",{"title":182,"searchDepth":200,"depth":200,"links":613},[614,615,616],{"id":342,"depth":200,"text":343},{"id":396,"depth":200,"text":397},{"id":546,"depth":200,"text":547},"Use PhaserGame as the host that creates and destroys Phaser.Game and provides the game-level runtime scope.","md",null,{},true,{"title":38,"description":617},"gSe6T-1C7Bl3T7OF-KvuQ1IlqKPqNtuEcH5YGtajovo",[625,627],{"title":30,"path":32,"stem":36,"description":626,"children":-1},"Learn the host component, scene layer, primitives, composables, and the raw access patterns in @onmax\u002Fphaser-vue.",{"title":42,"path":43,"stem":44,"description":628,"children":-1},"Define managed scenes with stable keys and keep Phaser's scene model intact.",1777965860278]