Integrate Vue with Phaser using markRaw and Pick-based configuration patterns.
npx skills add https://github.com/Esposter/Esposter --skill vue-phaserjs
Please help me install this Agent Skill. Skill: vue-phaserjs Source: https://github.com/Esposter/Esposter/tree/main/.agents/skills/vue-phaserjs Command: npx skills add https://github.com/Esposter/Esposter --skill vue-phaserjs
Esposter vue-phaserjs integration patterns — component inventory, markRaw for Phaser objects in Pinia stores, configuration Pick pattern. Apply when writing Phaser game objects, stores, or vue-phaserjs components.
Begin by creating each game object as a 4-file component (Configuration.ts, EventEmitsOptions.ts, SetterMap.ts, <Name>.vue) and wire Phaser objects into Pinia stores using markRaw.
High-intent search queries and answers about installing and using this skill.
To integrate Phaser with Vue 3 and Pinia without performance issues, wrap Phaser game objects in Pinia stores using markRaw. This prevents Vue's reactivity system from deeply tracking complex Phaser instances, ensuring consistent typing and smooth game performance.
The 4-file component pattern for Vue-PhaserJS organizes each game object into Configuration.ts, EventEmitsOptions.ts, SetterMap.ts, and a Vue component file. This structure standardizes configuration, event handling, and setter mapping for strongly typed Phaser integration.
You create strongly typed configuration interfaces for Phaser game objects by applying a Pick-based configuration pattern. This approach derives typed interfaces directly from existing Phaser types, ensuring strong typing and reuse across your Vue application.
Yes, you need familiarity with Vue 3, Pinia, TypeScript, and Phaser object patterns to implement Vue-PhaserJS integration. These prerequisites are required to effectively apply the 4-file component pattern and safely wrap Phaser objects using markRaw.
Vue reactivity slows down when storing Phaser objects in Pinia because Vue attempts to deeply track complex Phaser class properties. Using markRaw on Phaser objects bypasses this reactive overhead, allowing safe storage in Pinia state without performance degradation.
Jonathan0823Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.
simon-tannaManage keyboard, mouse, touch, and gamepad input for Phaser 4 games.
kirklinManage shared state in Vue applications using Pinia stores.
ckyeonDocument new game objects, components, and rendering features in Phaser 4.
