Vue Guide
Scenes
Define managed scenes with stable keys and keep Phaser's scene model intact.
Scenes stay first-class. The library does not replace Phaser scenes with a custom renderer abstraction.
Define a scene
src/game/main-scene.ts
import { definePhaserScene } from '@onmax/phaser-vue'
export const mainScene = definePhaserScene({
key: 'main',
preload({ scene }) {
scene.load.image('logo', '/logo.png')
},
create({ scene }) {
scene.add.image(400, 220, 'logo')
},
update({ scene }, time, delta) {
// Phaser still owns per-frame work.
},
})
Register the scene
src/App.vue
<PhaserGame :width="800" :height="480">
<PhaserScene scene-key="main" :definition="mainScene" />
</PhaserGame>
What the wrapper adds
- Stable scene registration through an explicit
sceneKey. - Ready-state tracking for child primitives.
- Dev warnings for duplicate scene keys.
- Simple
active,visible, andautoStartcontrol on the scene component.
Multiple scenes
You can mount more than one managed scene in the same game.
src/App.vue
<PhaserGame :width="800" :height="300" background-color="#0f172a">
<PhaserScene scene-key="gameplay" :definition="gameplayScene" />
<PhaserScene scene-key="hud" :definition="hudScene" />
</PhaserGame>
Use that pattern for HUD overlays or auxiliary scenes. The wrapper still leaves Phaser's own scene APIs available when you need pause, resume, sleep, or restart behavior.