vue-phaserjs

Inspired by phavuer.

Vue 3 integration for the Phaser 4 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 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 packages/app/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

⚖️ License

This project is licensed under the Apache-2.0 license.