Guides
Vue Reactivity vs Phaser Imperative Updates
Decide what belongs in Vue state and what should stay inside the Phaser scene runtime.
Use Vue reactivity for data that changes because the app changes state. Use Phaser imperative updates for data that changes because the game is running every frame.
Good candidates for Vue reactivity
- route-level state
- UI panels and menus
- settings toggles
- low-frequency HUD values
- scene selection and orchestration
- bridge events that express intent
Good candidates for Phaser imperative updates
- player movement
- enemy AI
- tweens and animation timing
- physics state
- camera follow behavior
- pointer and keyboard handling inside frame-sensitive logic
src/game/runner-scene.ts
scene.events.on('update', (_time, delta) => {
player.x += velocity * (delta / 1000)
})
src/composables/useHud.ts
const registry = usePhaserRegistry<{ score: number }>('hud')
The two models can coexist. Keep the authority where the update frequency demands it.