Skip to content

A integration library seamlessly combining Phaser 3 with Vue for enhanced game development.

License

Notifications You must be signed in to change notification settings

laineus/phavuer

Repository files navigation

Phavuer

Phaser 3.x Vue 3.x npm license

Phavuer

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.

<template>
  <Game :config="gameConfig">
    <Scene name="MainScene">
      <Text @pointerdown="onClick" text="Add a Rectangle" />
      <Container v-for="(n, i) in count" :key="i" :x="i * 130" :y="30">
        <Rectangle :width="120" :height="30" :origin="0" :fillColor="0x333333" />
        <Text :x="60" :y="15" :origin="0.5" :text="`Rectangle-${n}`" />
        <MyCustomComponent />
      </Container>
    </Scene>
  </Game>
</template>

<script setup>
import { Game, Scene, Container, Rectangle, Text } from 'phavuer'
import { ref } from 'vue'
import MyCustomComponent from './MyCustomComponent.vue'
const gameConfig = { .. }
const count = ref(1)
const onClick = () => count.value++
</script>

Documentation

Examples

Community