Examples
Nuxt Playground
Drive a scene from DOM UI in a Nuxt page while keeping the host client-only and scene logic explicit.
The playground lives in playground and shows the full Nuxt wrapper path. It uses NuxtPhaserGame, a typed bridge, and DOM controls outside the canvas.
Open the live demo at phaser-vue-playground.vercel.app.
playground/app/pages/index.vue
<NuxtPhaserGame instance-id="demo" :width="840" :height="420" background-color="#111827">
<PhaserScene scene-key="demo" :definition="scene" />
</NuxtPhaserGame>
playground/app/pages/index.vue
const bridge = usePhaserBridge<DemoBridge>('demo')
function boost() {
bridge?.emit('hud:boost', { amount: 1 })
}
That pattern is the intended answer when a Nuxt page needs route-level UI, forms, or controls around the game canvas.