vue-phaserjs

vue-phaserjs

Inspired by phavuer.

Vue integration for the Phaser game engine. Provides Vue components and composables that bridge Phaser scenes, game objects, and Pinia state with the Vue component lifecycle.

Table of Contents

• 🚀 Getting Started
• 📖 Documentation
• ⚖️ License

🚀 Getting Started

pnpm i vue-phaserjs @esposter/shared parse-tmx vue phaser phaser4-rex-plugins pinia

Add the type declaration files so scene key types and custom plugins get proper intellisense:

• phaser.d.ts — narrows scene key types
• vue-phaserjs.d.ts — provides custom plugin types

📖 Documentation

We highly recommend you take a look at the documentation to level up.

Usage

See the reference implementation in apps/web/app/pages/dungeons.vue for a complete example of a Phaser game embedded in a Nuxt/Vue page with Pinia-driven state.

Features

• Vue components wrapping Phaser Game, Scene, and common game objects
• Reactive Pinia integration — game state flows naturally through Vue's reactivity system
• Scene lifecycle hooks aligned with Vue's onMounted / onUnmounted
• TypeScript-first with full generic scene key support

Commands

Run from packages/vue-phaserjs/:

pnpm build        # compile to dist/
pnpm test         # vitest watch mode (coverage is run from the repo root)
pnpm lint:fix     # auto-fix lint
pnpm typecheck    # type check

⚖️ License

This project is licensed under the Apache-2.0 license.