phaser-vue

Phaser for Vue and Nuxt,
without hiding Phaser

Build Phaser games with Vue orchestration, typed scene wiring, and explicit escape hatches. Use the Vue package directly or add the Nuxt wrapper on top.
pnpm add @onmax/phaser-vue phaser
Get startedLive demoView on GitHub

Start with the path that matches your job

Pick one route first. You do not need the full docs site to get a first working game.

Get to first success
Install the package, mount one game, and verify the client-only contract.
Build in Vue
Learn the shared runtime, scene lifecycle, bridge APIs, primitives, and escape hatches.
Build in Nuxt
Install the module, configure runtime defaults, and keep Phaser explicitly client-only.

Choose your track

The same hybrid runtime powers both packages. Pick the wrapper that matches your app.

Vue package
Install @onmax/phaser-vue in any Vue 3 app. Use PhaserGame, PhaserScene, composables, and primitives directly.
Nuxt module
Add @onmax/nuxt-phaser for auto-imports, #phaser, client-only mounting, and runtime defaults.

Built for a hybrid workflow

Vue handles setup, UI, and low-frequency state. Phaser stays in charge of scenes, display objects, and hot-path runtime behavior.

PhaserGame host
One component owns Phaser.Game, merges defaults, mounts safely on the client, and cleans up on unmount.
Scene-first API
Register managed scenes with definePhaserScene and PhaserScene without replacing Phaser's own scene model.
Typed bridge
Connect Vue UI and Phaser scenes with createPhaserBridge and usePhaserBridge, scoped per game instance.
Small primitive layer
Create images, sprites, text, and containers declaratively without pretending Vue should reconcile the whole game tree.
SSR-safe mounting
Phaser only boots on mount. The Nuxt wrapper keeps that client-only boundary explicit.
Escape hatches
Grab game, scene, and raw Phaser objects at any point. The abstraction stays removable.

What the Nuxt module adds

The Nuxt layer stays thin. It improves ergonomics without duplicating the core runtime.

#phaser alias
Import shared runtime APIs through a Nuxt alias when you want one source of truth in app code.
Auto-imports
Register the composables you actually use, including definePhaserScene, usePhaserBridge, and scene helpers.
NuxtPhaserGame
Wrap PhaserGame in ClientOnly when clientOnly stays enabled, and keep the mounting contract clear.
Runtime defaults
Set defaults for pixelArt, transparent, suspendWhenHidden, and assetsBaseUrl in one Nuxt module config block.

Try the demo

Open the live Nuxt playground to see the bridge, scene wiring, and client-only host running together before you adopt the package in your own app.
Open playground

Start with the docs that match your next step

Use the getting-started pages for the happy path, then switch to the runtime-specific guides or reference pages when you need depth.
InstallationVue guideNuxt moduleAPI reference
Copyright © 2026