Phavuer is a wrapper library that integrates Phaser 3 with Vue 3.
It allows you to control Phaser, a JavaScript game engine, through Vue, and enables game development through declarative rendering.
<script setup>
import { Container, Game, Rectangle, Scene, Text } from 'phavuer'
import { ref } from 'vue'
import MyCustomComponent from './MyCustomComponent.vue'
const gameConfig = { /* ... */ }
const count = ref(1)
const onClick = () => count.value++
</script>
<template>
<Game :config="gameConfig">
<Scene name="MainScene">
<Text text="Add a Rectangle" @pointerdown="onClick" />
<Container v-for="(n, i) in count" :key="i" :x="i * 130" :y="30">
<Rectangle :width="120" :height="30" :origin="0" :fill-color="0x333333" />
<Text :x="60" :y="15" :origin="0.5" :text="`Rectangle-${n}`" />
<MyCustomComponent />
</Container>
</Scene>
</Game>
</template>- Phavuer https://phavuer.laineus.com
- Phaser3 https://newdocs.phaser.io/docs/3.70.0
- Usage samples
- Phavuer vs Phaser's plane API - A comparison of implementing a sample UI with and without Phavuer.
- Phavuer Example Shooter - A simple shooter example.
- Phavuer RPG Example - An RPG-style usage example.
- Games
- "The Dream Libra had" - An RPG about a girl wandering through a near-death dreamworld.
- "Succubus Club" - A platform for playing "Vampire: The Eternal Struggle" card game in a web browser. (by @thomasWajs)