[{"data":1,"prerenderedAt":796},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":159,"-getting-started-installation-surround":791},[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":13,"body":161,"description":785,"extension":786,"links":787,"meta":788,"navigation":368,"path":14,"seo":789,"stem":15,"__hash__":790},"docs\u002F1.getting-started\u002F1.installation.md",{"type":162,"value":163,"toc":778},"minimark",[164,173,178,198,202,207,288,532,538,542,547,618,730,736,740,758,762,766,774],[165,166,167,168,172],"p",{},"Install the package that matches your app runtime, then configure the host layer that owns ",[169,170,171],"code",{},"Phaser.Game",".",[174,175,177],"h2",{"id":176},"before-you-begin","Before you begin",[179,180,181,189,195],"ul",{},[182,183,184,185,188],"li",{},"Use ",[169,186,187],{},"@onmax\u002Fphaser-vue"," in a Vue 3 app when you want direct setup with no framework wrapper.",[182,190,184,191,194],{},[169,192,193],{},"@onmax\u002Fnuxt-phaser"," in a Nuxt app when you want the Nuxt module, auto-imports, and client-only wrapper behavior.",[182,196,197],{},"In Nuxt, you install both packages because the module builds on top of the shared Vue runtime.",[174,199,201],{"id":200},"vue-track","Vue track",[165,203,184,204,206],{},[169,205,187],{}," when you want to install the shared runtime directly in Vue 3.",[208,209,211,239,256,272],"code-group",{"sync":210},"pm",[212,213,219],"pre",{"className":214,"code":215,"filename":216,"language":217,"meta":218,"style":218},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @onmax\u002Fphaser-vue phaser\n","pnpm","bash","",[169,220,221],{"__ignoreMap":218},[222,223,226,229,233,236],"span",{"class":224,"line":225},"line",1,[222,227,216],{"class":228},"sBMFI",[222,230,232],{"class":231},"sfazB"," add",[222,234,235],{"class":231}," @onmax\u002Fphaser-vue",[222,237,238],{"class":231}," phaser\n",[212,240,243],{"className":214,"code":241,"filename":242,"language":217,"meta":218,"style":218},"npm install @onmax\u002Fphaser-vue phaser\n","npm",[169,244,245],{"__ignoreMap":218},[222,246,247,249,252,254],{"class":224,"line":225},[222,248,242],{"class":228},[222,250,251],{"class":231}," install",[222,253,235],{"class":231},[222,255,238],{"class":231},[212,257,260],{"className":214,"code":258,"filename":259,"language":217,"meta":218,"style":218},"yarn add @onmax\u002Fphaser-vue phaser\n","yarn",[169,261,262],{"__ignoreMap":218},[222,263,264,266,268,270],{"class":224,"line":225},[222,265,259],{"class":228},[222,267,232],{"class":231},[222,269,235],{"class":231},[222,271,238],{"class":231},[212,273,276],{"className":214,"code":274,"filename":275,"language":217,"meta":218,"style":218},"bun add @onmax\u002Fphaser-vue phaser\n","bun",[169,277,278],{"__ignoreMap":218},[222,279,280,282,284,286],{"class":224,"line":225},[222,281,275],{"class":228},[222,283,232],{"class":231},[222,285,235],{"class":231},[222,287,238],{"class":231},[212,289,294],{"className":290,"code":291,"filename":292,"language":293,"meta":218,"style":218},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createApp } from 'vue'\nimport { createPhaserVue } from '@onmax\u002Fphaser-vue'\nimport App from '.\u002FApp.vue'\n\nconst app = createApp(App)\n\napp.use(createPhaserVue({\n  debug: import.meta.env.DEV,\n  defaults: {\n    assetsBaseUrl: '\u002F',\n    suspendWhenHidden: true,\n  },\n}))\n\napp.mount('#app')\n","src\u002Fmain.ts","ts",[169,295,296,325,345,363,370,389,394,416,447,458,476,490,496,505,510],{"__ignoreMap":218},[222,297,298,302,306,310,313,316,319,322],{"class":224,"line":225},[222,299,301],{"class":300},"s7zQu","import",[222,303,305],{"class":304},"sMK4o"," {",[222,307,309],{"class":308},"sTEyZ"," createApp",[222,311,312],{"class":304}," }",[222,314,315],{"class":300}," from",[222,317,318],{"class":304}," '",[222,320,321],{"class":231},"vue",[222,323,324],{"class":304},"'\n",[222,326,328,330,332,335,337,339,341,343],{"class":224,"line":327},2,[222,329,301],{"class":300},[222,331,305],{"class":304},[222,333,334],{"class":308}," createPhaserVue",[222,336,312],{"class":304},[222,338,315],{"class":300},[222,340,318],{"class":304},[222,342,187],{"class":231},[222,344,324],{"class":304},[222,346,348,350,353,356,358,361],{"class":224,"line":347},3,[222,349,301],{"class":300},[222,351,352],{"class":308}," App ",[222,354,355],{"class":300},"from",[222,357,318],{"class":304},[222,359,360],{"class":231},".\u002FApp.vue",[222,362,324],{"class":304},[222,364,366],{"class":224,"line":365},4,[222,367,369],{"emptyLinePlaceholder":368},true,"\n",[222,371,373,377,380,383,386],{"class":224,"line":372},5,[222,374,376],{"class":375},"spNyl","const",[222,378,379],{"class":308}," app ",[222,381,382],{"class":304},"=",[222,384,309],{"class":385},"s2Zo4",[222,387,388],{"class":308},"(App)\n",[222,390,392],{"class":224,"line":391},6,[222,393,369],{"emptyLinePlaceholder":368},[222,395,397,400,402,405,408,411,413],{"class":224,"line":396},7,[222,398,399],{"class":308},"app",[222,401,172],{"class":304},[222,403,404],{"class":385},"use",[222,406,407],{"class":308},"(",[222,409,410],{"class":385},"createPhaserVue",[222,412,407],{"class":308},[222,414,415],{"class":304},"{\n",[222,417,419,423,426,429,431,434,436,439,441,444],{"class":224,"line":418},8,[222,420,422],{"class":421},"swJcz","  debug",[222,424,425],{"class":304},":",[222,427,428],{"class":300}," import",[222,430,172],{"class":304},[222,432,433],{"class":308},"meta",[222,435,172],{"class":304},[222,437,438],{"class":308},"env",[222,440,172],{"class":304},[222,442,443],{"class":308},"DEV",[222,445,446],{"class":304},",\n",[222,448,450,453,455],{"class":224,"line":449},9,[222,451,452],{"class":421},"  defaults",[222,454,425],{"class":304},[222,456,457],{"class":304}," {\n",[222,459,461,464,466,468,471,474],{"class":224,"line":460},10,[222,462,463],{"class":421},"    assetsBaseUrl",[222,465,425],{"class":304},[222,467,318],{"class":304},[222,469,470],{"class":231},"\u002F",[222,472,473],{"class":304},"'",[222,475,446],{"class":304},[222,477,479,482,484,488],{"class":224,"line":478},11,[222,480,481],{"class":421},"    suspendWhenHidden",[222,483,425],{"class":304},[222,485,487],{"class":486},"sfNiH"," true",[222,489,446],{"class":304},[222,491,493],{"class":224,"line":492},12,[222,494,495],{"class":304},"  },\n",[222,497,499,502],{"class":224,"line":498},13,[222,500,501],{"class":304},"}",[222,503,504],{"class":308},"))\n",[222,506,508],{"class":224,"line":507},14,[222,509,369],{"emptyLinePlaceholder":368},[222,511,513,515,517,520,522,524,527,529],{"class":224,"line":512},15,[222,514,399],{"class":308},[222,516,172],{"class":304},[222,518,519],{"class":385},"mount",[222,521,407],{"class":308},[222,523,473],{"class":304},[222,525,526],{"class":231},"#app",[222,528,473],{"class":304},[222,530,531],{"class":308},")\n",[165,533,534,535,537],{},"Expected result: your Vue app has the runtime plugin installed and can mount ",[169,536,38],{}," in any component.",[174,539,541],{"id":540},"nuxt-track","Nuxt track",[165,543,184,544,546],{},[169,545,193],{}," when you want the Nuxt wrapper to install the shared runtime for you.",[208,548,549,567,584,601],{"sync":210},[212,550,552],{"className":214,"code":551,"filename":216,"language":217,"meta":218,"style":218},"pnpm add @onmax\u002Fnuxt-phaser @onmax\u002Fphaser-vue phaser\n",[169,553,554],{"__ignoreMap":218},[222,555,556,558,560,563,565],{"class":224,"line":225},[222,557,216],{"class":228},[222,559,232],{"class":231},[222,561,562],{"class":231}," @onmax\u002Fnuxt-phaser",[222,564,235],{"class":231},[222,566,238],{"class":231},[212,568,570],{"className":214,"code":569,"filename":242,"language":217,"meta":218,"style":218},"npm install @onmax\u002Fnuxt-phaser @onmax\u002Fphaser-vue phaser\n",[169,571,572],{"__ignoreMap":218},[222,573,574,576,578,580,582],{"class":224,"line":225},[222,575,242],{"class":228},[222,577,251],{"class":231},[222,579,562],{"class":231},[222,581,235],{"class":231},[222,583,238],{"class":231},[212,585,587],{"className":214,"code":586,"filename":259,"language":217,"meta":218,"style":218},"yarn add @onmax\u002Fnuxt-phaser @onmax\u002Fphaser-vue phaser\n",[169,588,589],{"__ignoreMap":218},[222,590,591,593,595,597,599],{"class":224,"line":225},[222,592,259],{"class":228},[222,594,232],{"class":231},[222,596,562],{"class":231},[222,598,235],{"class":231},[222,600,238],{"class":231},[212,602,604],{"className":214,"code":603,"filename":275,"language":217,"meta":218,"style":218},"bun add @onmax\u002Fnuxt-phaser @onmax\u002Fphaser-vue phaser\n",[169,605,606],{"__ignoreMap":218},[222,607,608,610,612,614,616],{"class":224,"line":225},[222,609,275],{"class":228},[222,611,232],{"class":231},[222,613,562],{"class":231},[222,615,235],{"class":231},[222,617,238],{"class":231},[212,619,622],{"className":290,"code":620,"filename":621,"language":293,"meta":218,"style":218},"export default defineNuxtConfig({\n  modules: ['@onmax\u002Fnuxt-phaser'],\n  phaser: {\n    clientOnly: true,\n    defaults: {\n      suspendWhenHidden: true,\n      assetsBaseUrl: '\u002F',\n    },\n  },\n})\n","nuxt.config.ts",[169,623,624,639,660,669,680,689,700,715,720,724],{"__ignoreMap":218},[222,625,626,629,632,635,637],{"class":224,"line":225},[222,627,628],{"class":300},"export",[222,630,631],{"class":300}," default",[222,633,634],{"class":385}," defineNuxtConfig",[222,636,407],{"class":308},[222,638,415],{"class":304},[222,640,641,644,646,649,651,653,655,658],{"class":224,"line":327},[222,642,643],{"class":421},"  modules",[222,645,425],{"class":304},[222,647,648],{"class":308}," [",[222,650,473],{"class":304},[222,652,193],{"class":231},[222,654,473],{"class":304},[222,656,657],{"class":308},"]",[222,659,446],{"class":304},[222,661,662,665,667],{"class":224,"line":347},[222,663,664],{"class":421},"  phaser",[222,666,425],{"class":304},[222,668,457],{"class":304},[222,670,671,674,676,678],{"class":224,"line":365},[222,672,673],{"class":421},"    clientOnly",[222,675,425],{"class":304},[222,677,487],{"class":486},[222,679,446],{"class":304},[222,681,682,685,687],{"class":224,"line":372},[222,683,684],{"class":421},"    defaults",[222,686,425],{"class":304},[222,688,457],{"class":304},[222,690,691,694,696,698],{"class":224,"line":391},[222,692,693],{"class":421},"      suspendWhenHidden",[222,695,425],{"class":304},[222,697,487],{"class":486},[222,699,446],{"class":304},[222,701,702,705,707,709,711,713],{"class":224,"line":396},[222,703,704],{"class":421},"      assetsBaseUrl",[222,706,425],{"class":304},[222,708,318],{"class":304},[222,710,470],{"class":231},[222,712,473],{"class":304},[222,714,446],{"class":304},[222,716,717],{"class":224,"line":418},[222,718,719],{"class":304},"    },\n",[222,721,722],{"class":224,"line":449},[222,723,495],{"class":304},[222,725,726,728],{"class":224,"line":460},[222,727,501],{"class":304},[222,729,531],{"class":308},[165,731,732,733,735],{},"Expected result: your Nuxt app registers the module once in ",[169,734,621],{}," and keeps Phaser client-only by default.",[174,737,739],{"id":738},"pick-the-right-layer","Pick the right layer",[179,741,742,747,755],{},[182,743,184,744,746],{},[169,745,187],{}," when you want direct Vue setup and no framework coupling.",[182,748,184,749,751,752,172],{},[169,750,193],{}," when you want the Nuxt wrapper, auto-imports, and ",[169,753,754],{},"NuxtPhaserGame",[182,756,757],{},"Use both packages in a Nuxt app. The Nuxt module depends on the shared Vue runtime instead of replacing it.",[759,760,761],"important",{},"The docs describe a hybrid runtime, not a custom renderer. Phaser still owns scenes, display objects, input, animation, and the hot render loop.",[174,763,765],{"id":764},"next-step","Next step",[165,767,768,769,773],{},"Continue with ",[770,771,772],"a",{"href":18},"First game"," to mount one scene and verify the bridge wiring.",[775,776,777],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":218,"searchDepth":327,"depth":327,"links":779},[780,781,782,783,784],{"id":176,"depth":327,"text":177},{"id":200,"depth":327,"text":201},{"id":540,"depth":327,"text":541},{"id":738,"depth":327,"text":739},{"id":764,"depth":327,"text":765},"Install @onmax\u002Fphaser-vue or @onmax\u002Fnuxt-phaser and wire the runtime without hiding Phaser.","md",null,{},{"title":13,"description":785},"FIDU0_ChbeAbU9b_uYBcGfW2XjIXR-Y7LkRW7NArQLc",[792,794],{"title":5,"path":7,"stem":11,"description":793,"children":-1},"Install the package, mount the first game, and understand the SSR-safe mounting model.",{"title":17,"path":18,"stem":19,"description":795,"children":-1},"Mount PhaserGame, register a scene, and connect Vue UI to the canvas through the typed bridge.",1777965859862]