Vue

Use @onmax/phaser-vue directly in any Vue 3 app for host setup, scenes, primitives, bridge events, and raw Phaser access.

@onmax/phaser-vue gives you the shared runtime without any Nuxt-specific wiring. Use it in a Vite app, inside a component library preview, or anywhere you want Vue around a Phaser canvas.

This track covers the host component, scene lifecycle, primitives, composables, and the imperative escape hatches that keep Phaser in control of hot-path behavior.

Use this section when you already know you want the Vue runtime and you need to decide which part of the API to learn next.

Start in the Vue layer

Follow the guides in order or jump to the topic you need.

Install the package

Install @onmax/phaser-vue, mount the plugin, and verify the first scene.

Host the game

Use PhaserGame as the only place that creates and destroys Phaser.Game.

Manage scenes

Use primitives

Create containers, images, sprites, and text declaratively when the scene setup is simple.

Bridge Vue and Phaser

Connect DOM controls and scenes with typed bridge events and low-frequency registry state.

Drop to raw Phaser

Reach for usePhaserGame, usePhaserScene, usePhaserObjectRef, and raw object access whenever performance matters.

Use Vue to orchestrate the game. Keep per-frame movement, physics, and animation state in scene code or imperative hooks.

Edit this pageorReport an issue